Position:fixed element within a position:relative parent. Which browser renders correctly?

前端 未结 2 520
失恋的感觉
失恋的感觉 2020-12-09 22:29

I am seeing a discrepancy in how fixed position elements behave within a relatively positioned parent. According to the docs I am finding online, FireFox and Chrome should

2条回答
  •  無奈伤痛
    2020-12-09 22:35

    Reading the W3C spec, I would say the behavior in Chrome/FF is actually correct:

    Fixed Positioning

    The box's position is calculated according to the "absolute" model, but in addition, the box is fixed with respect to some reference.

    The absolute model positions relative to the containing block:

    Absolute Positioning

    The box's position (and possibly size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box's containing block.

    EDIT: For a fixed position element, the containing block is defined as the viewport:

    If the element has 'positioned: fixed', the containing block is established by the viewport in the case of continuous media

    However, in the case where all positing properties are set to auto, I couldn't find any definition of exactly what auto should result in. Therefore, the parent's position defines the initial position of the fixed element if no other position is given. In addition, the element does stay fixed with respect to the view port when scrolled, as specified. If the parent moves, the fixed element should move with it's initial position with it; the same as you would expect it to move if you changed the left property.

    If it's incorrect to move the block with its parent, then it's incorrect to position it based on that parent in the first place. The only alternative is to position it in upper left hand corner of the viewport for properties of auto. If this is case, all of the browsers implement the spec wrong, Safari just has an implementation that's wrong and inconsistent.

    It is worth noting that exhibited behavior occurs whether or not the parent element is relatively positioned.

提交回复
热议问题