CSS Positioning Relative, Absolute, Fixed
In the vast ocean of web development, one topic has persistently eluded my grasp — CSS positioning. To shed light on this, we must first take a step back and understand how HTML is interpreted, specifically focusing on how it’s rendered on the page.
Rendering HTML on the Page
When a browser reads an HTML file, it fetches the elements within and constructs a DOM (Document Object Model) tree. This tree is structured from top to bottom, and during rendering, the visuals are created based on this tree, intertwined with CSS to achieve the desired look. Now, when we wish to modify the position of an element, what options do we have?
CSS Positions
Upon DOM construction, elements are positioned statically by default. With this setting, shifting elements using properties like top, left, right, or bottom is futile. However, you can utilize margin or padding. Margin creates space outside the element, while padding generates space between the element and its border. But if you attempt to reposition using these properties, the order in which elements are arranged in the DOM tree affects other elements as well. To avoid this, you can use top, left, right, or bottom, but ensure the element’s position is set to relative. Essentially, relative positioning resembles static but enables the execution of shift commands and causes elements to overlap others if necessary.
Imagine a grid of 9 squares, akin to a Tic Tac Toe board. If you desire to nudge the center square slightly downwards, setting its position to relative will do the trick. Should there be another relatively positioned element in the direction of shift, the z-index property decides which one stays on top.
Diving into Absolute Positioning
Employing the absolute value detaches the element from its position in the DOM tree. Although elements are rendered from top to bottom, an absolute positioned element, when its turn comes, will be placed not according to its original position, but relative to the first parent element with relative positioning. If no such parent exists, it’s positioned relative to the body.
By assigning top:0 and left:0 to an absolute positioned element, it’ll align to the top-left corner of the nearest relative positioned parent, or the body if none is present.
The fixed position also works the same as the absolute, but it gets a position on the top side of the viewport.
Challenge Yourself
Here’s a practical example to test your understanding: your goal is to reposition the middle element of the three-part div located at the bottom, to the top-left corner of the right section of the two-part div at the top. Experiment with the discussed positioning techniques to accomplish this task, and you’ll find yourself one step closer to mastering CSS positioning!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Example</title>
<style>
.container {
position: relative;
}
.two-part-div {
display: flex;
height: 200px;
}
.two-part-div .part-red {
flex: 1;
background-color: red;
}
.two-part-div .part-green {
flex: 1;
background-color: green;
}
.full-width-div {
height: 200px;
background-color: purple;
width: 100%;
}
.three-part-div {
display: flex;
height: 100px;
}
.three-part-div .part-grey {
background-color: grey;
height: 100px;
width: 100%;
}
.three-part-div .part-wheat {
background-color: wheat;
height: 100px;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="two-part-div">
<div class="part-red"></div>
<div class="part-green"></div>
</div>
<div class="full-width-div"></div>
<div class="three-part-div">
<div class="part-grey"></div>
<div class="part-wheat"></div>
<div class="part-grey"></div>
</div>
</div>
</body>
</html>
