Why doesn't the absolute positioned div start from the top? - html

Question

Consider the html and css in this codepen link.
#box2 in the page has been positioned absolute and has a left offset of 200px, so moves 200 px to the right. However, the top offset also gets set to 200px somehow, but if I correctly understand absolute positioning, it should be positioned relative to its parent (body in this case), and so it should have top offset 0.
Can you explain why this happens?

Answer 1

With your css .box you set all boxes 1 - 3 as position: relative.
Your css #box2 sets a absolute positioning on box 2. The css selector for an id (#box2) is more specific than a class selector (.box) and therefore positioning: absolute in #box2 overrules the positioning: relative in .box
You do not define a top property/value in your css for the #box2. That means it will flow with the other tags except for the left position.
Because a div is displayed as block it will display right below #box1. It will be drawn 200px from the left because of your css left: 200px;
Try to change your css for #box2 into something like this
#box_2 { background: #44accf; left: 150px; top: 100px; position: absolute; }
and play around with the left and top values, to understand what the absolute positioning is doing.

Answer 2

You haven't given it a top: value - so it's placing itself where it was if it was relatively positioned/default place (As BoltClock has said, this is known as the static position).
For the purposes of this section and the next, the term "static
position" (of an element) refers, roughly, to the position an element
would have had in the normal flow.
More precisely, the static position
for 'top' is the distance from the top edge of the containing block to
the top margin edge of a hypothetical box that would have been the
first box of the element if its specified 'position' value had been
'static' and its specified 'float' had been 'none' and its specified
'clear' had been 'none'.
~W3 Spec
Here is a basic example:
html,
body {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 200px;
height: 200px;
}
#box_1 {
background: #ee3e64;
}
#box_2 {
background: #44accf;
left: 200px;
position: absolute;
top: 0;
}
#box_3 {
background: #b7d84b;
}
<div id="box_1" class="box"></div>
<div id="box_2" class="box"></div>
<div id="box_3" class="box"></div>
As you can see, this would also be able to do this using the display:inline-block property (since you're removing the defaulted 'block' styling that take's up 100% of the width), which you then wouldn't need to worry about the absolute at all:
html,
body {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
}
#box_1 {
background: #ee3e64;
}
#box_2 {
background: #44accf;
}
#box_3 {
background: #b7d84b;
}
<div id="box_1" class="box"></div>
<div id="box_2" class="box"></div>
<div id="box_3" class="box"></div>
If, however, you needed it to only have two squares wide, you might want to wrap it in a container div width and set a width:
html,
body {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
}
#box_1 {
background: #ee3e64;
}
#box_2 {
background: #44accf;
}
#box_3 {
background: #b7d84b;
}
.container{
width:500px;
}
<div class="container">
<div id="box_1" class="box"></div>
<div id="box_2" class="box"></div>
<div id="box_3" class="box"></div>
</div>
So, you were right to think that the absolutely positioned element is aligning to the next available parent with position:relative (which, just so happens to be the body, since you haven't declared one), you have just missed the use of top to position it where you want vertically, and so is defaulting to where 'it would be otherwise' - which is the baseline (which is at the bottom by default in divs)