Position :fixed position has been fixed relative to the screen viewport (viewport) to specify the position of the fixed attribute element. Ah, encounter this kind of problem can only say oneself too dish, so all sorts of turn over the data, see fixed exactly based on what positioning, so there are the following stubborn heart explanation!!

Let’s take a look at what MDN says:

fixed

Instead of reserving space for elements, they are positioned by specifying their position relative to the screen viewport. The position of the element does not change as the screen scrolls. When printing, the element will appear in a fixed position on each page. The fixed property creates a new cascading context. When the transform attribute of an element ancestor is not None, the container changes its viewport to that ancestor.

What?

Ok, I admit that this part of the MDN see is less, work the initial contact with HTML, CSS, follows the path to walk down, before there are two I don’t know the concept of context and the cascade element ancestor of the transform properties of none, If the parent or ancestor element of the DOM structure has a transform attribute other than None, the fixed position relative to the element will change from viewport-based to viewport-based. What a pit!!

To illustrate:

<style>
  .transformEle {
    width: 400px;
    height: 400px;
    transform: translateY(200px);
    background: #00D287;
  }
  .fixedEle {
    position: fixed;
    bottom: 0; 
    width: 50px;
    height: 50px;
    background: #FF3131;
  }
</style>
<div class=transformEle>
    <div class=fixedEle>
    </div>
</div>
Copy the code

If transformEle uses transform and fixedEle uses position: fixed, position: Fixed is not fixed to a Visual viewport, the actual result is equivalent to positioning fixed relative to a visual viewport. It is transformELe, mainly because transform and Position: Fixed use different coordinate systems.

  • I have time to write more about the cascading context.