CODEWITHSUNDEEP
htmlcsscss-position
Nitesh
Nitesh

Reputation: 2830

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

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

Upvotes: 7

Views: 680

Answers (4)

web-tiki
web-tiki

Reputation: 103810

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.

Upvotes: 1

JNF
JNF

Reputation: 3730

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.

Upvotes: 0

Amar Magar
Amar Magar

Reputation: 881

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/#

Upvotes: 0

Nasco.Chachev
Nasco.Chachev

Reputation: 676

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.

Upvotes: 0

Related Questions