1408069 - CSS absolute element badly placed relatively to its closest positioned inline parent

Status: RESOLVED DUPLICATE of bug 489100

(Core :: Layout: Block and Inline, defect, P3)

Description

[antoine.combes.ac]

Attachment: visualisation of the bug

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.91 Safari/537.36

Steps to reproduce:

A block element is absolutely positioned with a "bottom: 0". Its direct parent is inline and relatively positioned, and contains text.

See example: https://jsfiddle.net/uageadjf/


Actual results:

The child element is positioned at the bottom of the parent's text's first line.


Expected results:

The child element should have been positioned at the bottom of the parent's box model.

Comment 1

[Pascal Chevrel:pascalc (PTO until April 26)]

I can see the different behavior in Firefox compared to Chrome in both 56 and nightly 58

Comment 2

[Jet Villegas (inactive)]

The position and size of an absolutely positioned element is calculated relative to its nearest ancestor. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, which we implement, if the inline element is split across multiple lines as in the test case, the containing block is undefined [1]

The latest spec draft [2] now states that the bottom and right are the bottom and right content edges of the last box of the ancestor.

[1] https://www.w3.org/TR/CSS2/visudet.html#containing-block-details
[2] https://drafts.csswg.org/css-position-3/#def-cb