What are the left and top values of an element and its child element if both have position:absolute

Question

I have this html, where element's position is absolute, but left & top are auto:

<div style="position:absolute; width:100px; height:100px;">
    <span style="position:absolute;">Test child</span>
</div>

I feel that the left & top for the span would be 0 px, but couldn't surely decipher from specs or other posts.

So, if I didn't specify the left & top for absolutely positioned element whose parent is also absolutely positioned & has no margin or padding, the left and top would be 0px, Is that correct as per css specs?

Also, in same case as above, but under writing mode top-to- bottom & left-to-right writing mode, the top & right would be 0px, right?

Edit: To make it more clear, I meant the left & top would be 0px, 0px relative to the parent div. Or Is above equivalent to :

<div style="position:absolute; width:100px; height:100px;">
    <span style="position:absolute;left:0px;top:0px">Test child</span>
</div>

Thanks

Peppermint

In my answer you will find both a working sample that shows how it works and reference to documentation. – Perspicacity

Answer 1

First, you should note that the initial values for top, left, right and bottom are auto and not 0. See section 9.3.2 of the specs

So to the question:

if I didn't specify the left & top for absolutely positioned element whose parent is also absolutely positioned & has no margin or padding, the left and top would be 0px, Is that correct as per css specs?

The answer is no this isn't correct. In your example, it happens to be true because the child element is positioned there in the flow of the document (even without any positining).

As you can see in this example :

<div style="position:absolute; width:100px; height:100px;">
  Some text
  <span style="position:absolute;">Test child</span>
</div>

The only effect absolute positioning has in this case is to take the element out of the flow but it remains in its original position.

Metaphysical

What I meant was: even if I added left:0px;top:0px to the span style, the result would be same. i.e. it will be at 0,0 relative to the parent div. Is that right? – Peppermint

in your example yes @NiteshChordiya. But if not in the example I shared. And it will be relative to the parent div as it is not positioned with static positioning. – Metaphysical

Answer 2

If there's not parent with position set to relative , and you set the position to absolute , that will affect your element to get an position from x(0) and y(0) (left top screen corner) , if you set for example 2 divs , the first one is with position:relative , and his child is with position:absolute; ,, that child item will be affected from x(0), y(0) from its parent position.

<div style="position:absolute;">One</div> <-- this one will be on the left top of the screen ,

    <div style="position:relative;">
      <div style="position:absolute;">Here you go boy</div>
    </div>

 (this children element gets the position of its parent element , not of the top-left screen)

In your case, you have set to both elements ( div and span ) position:absolute , if there's no parent element with position:relative; they automatically goes on the top left corner and gets left(0) top(0). If you want your span element to inherit div's position , first you have set position:relative; to your div and position:absolute; , to your span , and after that you have to adjust your left and top pixels , in depends on where your element wants to be positioned , there's a simple code below

=================================================

FIRST CASE : NO INHERITANCE OF POSITIONING! HTML

<div>
    <span>Test child</span>
</div>

CSS

 div{
    height:100px;
    width:100px;
    border:2px solid black;
    margin:0 auto;
}

span{
    position:absolute;
    left:0px;
    top:0px;
}

In this code , I've positioned your div in the middle , by (margin:0 auto).I've set position:absolute to your span and left:0 , top:0 , (there's no inheritance , because div doesn't contain position:relative;).

=============================

SECOND CASE - INHERITANCE

CSS:

div{
        height:100px;
        width:100px;
        border:2px solid black;
        margin:0 auto;
        position:relative; /* from since now , your span will be affected of div's position */
    }

    span{
        position:absolute;
        left:0px;
        top:0px;
    }

Now your span is affected by div's position and will be placed on the x(0) and y(0) corner in your div , not screen. I hope you understand this.

Ambivalence

Can you kindly first explain what would happen in case of the example I asked the question for? I mean If I put the sample code under a body. Thanks – Peppermint

And any reference to specs/documentation would be great – Peppermint

I've edited my asnwer, if you can't understand something, tell me :) – Ambivalence

This statement is wrong in your answer, In your case, you have set to both elements ( div and span ) position:absolute , if there's no parent element with position:relative; they automatically goes on the top left corner and gets left(0) top(0). If you want your span element to inherit div's position , first you have set position:relative; and my answer proves it. Please read the specs in my answers link and you'll see for your self. – Perspicacity

Answer 3

The default left and top are 0 for the span i have used left and top inside parent div for span you can remove top and left to see element in top-left corner remove

#testChild {
top:50px;
left:10px;
}

after removing this part you can surely know that default left and top are zero

https://jsfiddle.net/amarmagar17/op1nLep5/#

Holophytic

Answer 4

While it's true that, as @Nasco points out, a positioned element refers to it's parent if parent is positioned as well, it doesn't have to be relative, that's true for any positioning, besides static (spec). This changes the element's reference for top-bottom-left-right, but not the values.

This small fiddle demonstrates that an element with position:absolute does not have any special coordinate treatment, i.e. it stays inflow, as if it has position:relative;top:0;left:0; (that would be right:0; in an RTL setting). You can see this especially clearly in the Test2 section.

Chrome devTools does not even show top or left on computed properties.

However, position:absolute does have other implications, such as ignoring it's parent's block. This does happen regardless, as seen in Test1 section.

BTW, you can see in above link that fixed (a subcategory of absolute) does get special attention, apparently rendered out of the screen (Test5Fixed) unless given a top-bottom attribute. right-left acts as above (Test3Fixed)

Can't see anything in spec about it, so it might be browser dependent.

Humbug