Transform is familiar, with attributes like translate, rotate, scale, skew and so on, but that’s not what this article is about. It’s the effect of Transform on element layout, page rendering. For example, did you know that it affects the position of the fixed element? Did you ever think it would change the order in which elements are stacked?

Tranform changes the location object of the fixed child element

Example to explore

Let’s start with an example (the code is here) : The fixed element in the following example is set to top: -50px, which should be invisible because it will be positioned outside the top of the page relative to the root element. But the truth hits us in the face, it’s visible! Why is that?

The key is that the fixed element is wrapped around the parent div of the transform property, so it is positioned relative to the parent element of the transform, not the root element, as we thought, because the parent element has margin-top: 50px, so the two cancel out (-50px + 50px = 0), resulting in the element at the beginning of the page.

As to why this is the case, it is up to the W3C specification to find out why. In W3C-Transform Rendering, I found this explanation: For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, And the object acts as a containing block for fixed amenities, If the transform value is not None, a containing block will be created, and the fixed child of the element will be positioned relative to the element.

A little thought

The reason is clear, so why did the W3C committee design it this way? In my humble opinion, there are two ways to think about it:

  1. Let’s say we want toFixed elementTo position the root element absolutely, we tend to treat it as the first child of the root element, so that it does not existTransform the parent elementAbout the package.
  2. So under what circumstances do we putFixed elementOn theTransform the parent elementUnder? In my opinion, we only do this if we want it to morph along with the parent, otherwise why not put it under the root element?

Transform changes the order in which elements are stacked

Example to explore

Similarly, let’s start with an example (the code is here) : in the following example, the second element (the blue block) is offset 40px to the left by margin-left: -40px, and it covers part of the first element (the yellow block) according to the come-from-behind cascading rule. The second line adds transform: scale(1) to the first element (the yellow block), and it covers the second element (the blue block). The come-frother rule doesn’t seem to apply. Why?

Again, try to look at the W3C specification for reasons. In W3C-Transform Rendering, I found a sentence basically the same as in the previous section: For elements whose layout is governed by the CSS box model, Any value other than none for the transform results in the creation of a stacking context, That is, elements whose transform value is not None will create a stacking context. Cascading context? What the hell is that? You’ve probably only heard of block-level formatting context (BFC).

Simply put, a cascading context is related to the order in which elements are displayed on the Z-axis, and the level of the cascading context elements is higher than that of normal elements, as shown in the above example:

  1. The root element is the cascading context element, and the blue and yellow blocks are its children;
  2. The blue block because the transform value is notnone, so it is upgraded to a cascading context element, so it has a higher cascading level than the yellow block (normal element).

The content of cascading context is worth exploring in depth, here recommend two good content, one is MDN – cascading context, the other is Zhang Xinxu – in-depth understanding of CSS cascading context and cascading order.

Write in the last

When faced with weird problems with CSS, we can look to Google or StackOverflow for answers, and don’t forget the W3C. Sometimes the truth is already lying quietly in the standard, as long as we are willing to look, good at looking, will be able to find ^_^

Refer to the link

  1. W3C- CSS Transforms Module Level 1
  2. Zhang Xinxu – CSS3 Transform’s influence on n-multiple rendering of ordinary elements
  3. Zhang Xinxu – In-depth understanding of cascading context and cascading order in CSS
  4. Knot one teacher – Visual formatting model – Container block

Blog post link