CSS position:absolute but html order still matters

Question

I have a web page with an equivalent of the following html, and the corresponding CSS:

<div class="father">
    <div class="divson"></div>
    <a class="ason"></a>
</div>

.father     {position:relative}
.father div {position:absolute}
.father a   {position:relative}

Because 'divson' has position:absolute, I'd expect it to be always placed relatively to 'father' (because this one is positioned as well). Although, 'divson' still moves elsewhere when I reorder the html as follows:

<div class="father">
    <a class="ason"></a>
    <div class="divson"></div>
</div>

How is it possible that a div with position:absolute still depends on the html order? What could be a cause that I wouldn't have thought of?

Thanks

“Moves elsewhere” certainly when no `top` and `left` is given. On `divson`. — deEr., Apr 26 '18 at 12:34

score 3 · Accepted Answer · answered Apr 26 '18 at 12:33

3

You have not set the left, top, bottom, right property for the divson. You have to set these to fix your div position, if you are using absolute positioning.

.divson{
 position:absolute;
 left:0;
 top:0
}

answered Apr 26 '18 at 12:33

Abhay Srivastav

754
6
16

I gotta make a couple checks, but this seems to work! I thought those values were default.. Thanks a lot! – Telergoel Apr 26 '18 at 12:39
You're welcome. – Abhay Srivastav Apr 26 '18 at 12:47

score 1 · Answer 2 · answered Apr 26 '18 at 12:33

1

As w3schools says:

position: absolute;

The element is positioned relative to its first positioned (not static) ancestor element.

answered Apr 26 '18 at 12:33

Bálint Budavölgyi

510
3
18

Right, but the ancestor 'father' is not static tho, it is positioned as well with position:relative – Telergoel Apr 26 '18 at 12:37
That's the point actually – Bálint Budavölgyi Apr 26 '18 at 13:35

score 0 · Answer 3 · answered Apr 26 '18 at 12:32

0

Display: flex and play with items order (order:1; order:2;)

answered Apr 26 '18 at 12:32

Erick Boileau

478
4
14

Thanks for the consideration. Check out the answer. `:)` – Praveen Kumar Purushothaman Jun 22 '18 at 08:59

CSS position:absolute but html order still matters

3 Answers3