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

Question

I have this html where the position of the element is absolute, but left and top are auto:

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

I feel that the left and top for the span will be 0 px, but I can not for sure decrypt them from the specifications or other messages.

So, if I did not specify the left and top positions for an absolutely positioned element, whose parent is also absolutely positioned and has no margin or padding, the left and top will be 0px. Is this correct according to css specs?

Also, in the same case as above, but in recording mode from top to bottom and left to right, the top and right will be 0px, right?

Edit: To make this clearer, I meant that left and top would be 0px, 0px relative to the parent div. Or above is equivalent:

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

thanks

Answer 1

First, you should notice that the initial values ​​for the upper, left, right, and lower levels are automatic, not 0 . See section 9.3.2 of the specifications

So to the question:

if I did not specify the left and top positions for an absolutely positioned element, the parent element of which is also absolutely located and has no margin or padding, there will be 0px on the left and on the top, is this true for the css function?

The answer is no, this is wrong . In your example, this is true because the child is located there in the document stream (even without any positioning).

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 of absolute positioning in this case is to remove the element from the stream, but it remains in its original position.

Answer 2

If the parent element with relative is not set, and you set the absolute position, this will affect your element to get the position from x (0) and y (0) (edge ​​of the upper left screen), if you set for example 2 divs, the first one with position:relative , and its child has a position: absolute; that the child will depend on x (0), y (0) on 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 set both elements (div and span) position:absolute , if there is no parent element with position:relative; , they automatically go to the upper left corner and remain left (0) at the top (0). If you want your span to inherit the position of the div, you first set position:relative; in the div and position:absolute to your range, and after that you have to adjust the left and top pixels, depending on where your element wants to be located, there is a simple code below

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

FIRST CASE: NO POSITIONING INHERITANCE! 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 placed your div in the middle, (margin:0 auto) . I set position:absolute to your range and left:0 , top:0 (there is no inheritance, because the div does not 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 position */ } span{ position:absolute; left:0px; top:0px; } 

Now your range depends on the position of the div and will be placed at x (0) and y (0) in your div, and not on the screen. I hope you understand this.

Answer 3

By default, 0 for the range is indicated on the left and top, I used left and top inside the parent div for span, you can remove the top and left to see the element in the upper left corner.

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

after deleting this part, you probably know that by default left and top are zero

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

Answer 4

Although it is true that, as @Nasco points out, the position ed element refers to its parent, if the parent position ed also should not be relative , this is true for any position except static (spec) . This changes the element reference for top-bottom-left-right , but not the value.

This small script shows that an element with position:absolute does not have special coordinate processing, that is, it remains an influx, as if it were position:relative;top:0;left:0; (this will be right:0; in the RTL setup). This can be seen especially clearly in the Test2 section.

Chrome devTools doesn't even show top or left for computed properties.

However, position:absolute has other consequences, such as ignoring its parent block. This happens regardless of what is seen in the Test1 section.

By the way, you can see in the link above that fixed (absolute subcategory) gets special attention, apparently made from screen (Test5Fixed) if the top-bottom attribute is not specified. right-left acts as above (Test3Fixed)

It is not possible to see anything in the specification, so it may be browser dependent.