1. Introduction

Before writing this article, the fixed element I understood looked like this :(excerpt from CSS layout basics)

The fixed position is of a similar type to the Absolute position, but its relative moving coordinates are the view (the web page window within the screen) itself. As the view itself is fixed, it will not change along with the scroll bar of the browser window scroll, unless you are moving across the screen the screen position of the browser window, or change the display size of the browser window, so the fixed position of element is located in a certain position of the view within the browser window, will not be affected by the document flow, This is the same as background-attachment:fixed; property function.Copy the code

But until I read this article why is CSS so hard to learn? In the article, the author mentioned a “dark magic”, how to make fixed elements no longer use the viewport as a reference object, but the parent container as a reference object. Now I’ve got a skill. The only thing I disagree with the author is that CSS he mentioned is “not orthogonal” and difficult to learn. In fact, I think the fundamental reason is that the knowledge base is not solid enough. There’s a principle to everything, and you can’t have an object that science can’t explain for no reason.

So what we’re going to do here is we’re going to build on that, and we’re going to talk about why this is the case and then we’re going to write an example that’s going to be used a lot on mobile.

2. Why does a fixed element add a transform to its parent as a reference object?

Detailed demo is as follows:

If we look at the demo, we’ve set transform: scale(1) in the parent element; The child element fixed-to-Container then references the parent element and is no longer fixed in one place, but flows as the document flows.

Why is that?

The answer lies in the element with the transform attribute set. The W3c document defines the transform attribute as follows:

For elements whose layout is controlled by the CSS box model, the Transform property does not affect the content flow around the Transformed element. However, the scope of the overflow region will take into account the transform element. This behavior is similar to what happens when elements are offset by relative positioning. Therefore, if the overflow property value is' scroll 'or' auto ', the scroll bar will show what you want to see converted outside of the visible area. For elements whose layout is controlled by the CSS box model, all 'transform' property values other than 'None' create a stack context. The drawn implementation must be in the layer it creates in its parent stack context, using the same stack order if it is a positioned element with "Z-index: 0". If with a ` transform ` element also configure the ` position ` attributes, "z - index" property described according to the [CSS2] (https://www.w3.org/TR/css-transforms-1/#biblio-css2) has been applied, Unless "auto" is treated as "0" because a new stack context is created. For elements whose layout is controlled by the CSS box model, any 'transform' property value other than 'None' will cause the element to be a contain block, and its fixed-positioned descendants will all have object as their contain block. The root element of the [Fixed Backgrounds] (https://www.w3.org/TR/css3-background/#fixed0) will be affected by the impact of the configuration of the transform attribute on the element. For all other elements affected by transform (for example, applying the transform attribute to them, or to any of their ancestors), Elements with a background-attachment property value of 'fixed' will be treated as if they had a 'scroll' property configured. The calculated values of other 'background-attachment' are not affected.Copy the code

In this introduction we found that the transform affects the fixed property. See the demo above for details.

To put it simply: an element with the transform attribute will cause that element to form a new contain block, and then its descendant element will take that parent element as the contain block if it has a fixed attribute, thus creating the phenomenon we saw earlier.

In addition to the above, I noticed two other features:

  1. Fixed elements are not fixed in a certain position and lose the unique properties of fixed elements
  2. Fixed elements do not leave the document flow, but attributes such as top are still available. In this example, the top property is configured with top:10px; The entire document flow goes down 10px;

3. Real fixed elements, but not viewport reference

A truly fixed element is one that can actually be fixed in a position under which other elements can move. A common requirement in a real project is the following demo:

In the demo, when we click the button, a panel will pop up. On the top of the panel, there will be a fixed head, and the rest of the panel can slide freely. This kind of case is believed to be used in many children’s shoes.

As we said before, this is the solution.

But it’s not clear whether this is the best approach. Is there a better way for csS-savvy kids to do it? Be generous with your advice.