Absolute positioning inside inline elements. Is this behavior right?

Question

Consider the following simple HTML and CSS

a.rel{ position:relative; } button{ position:absolute; top:0; left:0; } 

 Lorem ipsum dolor sit amet <a class="rel" href="https://www.google.co.uk"> <img src= "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> <button>I'm a button</button> </a> 

Now consider CSS2 10.1.4.1

4. If the element has "position: absolute", the containing block is set by the closest ancestor with the "position" of "absolute", "relative" or "fixed" as follows:

   • In the case where the ancestor is an inline element, the containing block is a bounding box around the fill fields of the first and last inline fields generated for this element. In CSS 2.1, if an inline element is split into multiple lines containing an undefined block.

or CSS3 3.1.2.2

2. If the element has a position: absolute, the containing block is set by the nearest ancestor from a position other than static, as follows:

   2. In the case where the ancestor is inline, the containing block depends on the direction property of the ancestor:

      • If the ltr direction, the top and left of the containing block are the top and left edges of the contents of the first field generated by the ancestor, and the bottom and right are the lower and right edges of the contents of the last ancestor window.

Does this not mean that the button should look at the top of the image in the upper left corner? What part of the specification I did not understand when the button appears under the image?

Answer 1

The height of the inline block (that is, the field generated by the element with display: inline ) is determined by the column, which is an imaginary field high enough to contain text in the calculated font-size . See §10.6.1 and §10.8.1 , as well as the line-height propdef (although note that line-height determines the line height of the line where the inline window appears, not the inline one).

It is noteworthy that the child of the built-in level does not affect the height of the parent built-in block, even if this child is higher than the rack. Thus, the position of the button relative to the stand of the element a . It also means that the position of the button will be the same if the image was not at the initial stage:

 a.rel{ position:relative; } button{ position:absolute; top:0; left:0; } 

 Lorem ipsum dolor sit amet <a class="rel" href="https://www.google.co.uk"> <!-- img src= "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" --> <button>I'm a button</button> </a> 

(The button is now horizontally closer to the text, because in element a there is no other content in the stream except a space between the elements, which ends with collapsing. However, its vertical position remains the same.)

Here I added some horizontal addition to the a element, considering both this and the previous background text, and made the button translucent to show that the height of the inline block is really the height of the rack

 span{ background-color:#f00; } a.rel{ position:relative; background-color:#00f; padding:0 1em; } button{ position:absolute; top:0; left:0; opacity:0.5; } 

 <span>Lorem ipsum dolor sit amet</span> <a class="rel" href="https://www.google.co.uk"> <!-- img src= "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" --> <button>I'm a button</button> </a> 

You can see part of the built-in window peeking out from the corners of a button in some browsers; I cannot explain that, unfortunately, "different browsers render differently."

Note also that the button does not appear below the image. If you give the image a diagram, you will see that the button does not adhere to the borders of the image at all (it should not try, in the end, it is absolutely positioned):

 a.rel{ position:relative; } button{ position:absolute; top:0; left:0; } img{ outline:thin solid; } 

 Lorem ipsum dolor sit amet <a class="rel" href="https://www.google.co.uk"> <img src= "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> <button>I'm a button</button> </a> 

Answer 2

The IS button is located in the upper left corner of the link. However, you are mistaken about the size of the link. Since a has a built-in built-in display, its size does not increase in size img , and not only in line height (determined by font size).

If you increase the font size of the link element, the button will increase.

You can use dev tools to easily see the exact dimensions of a link element.