Location>code7788 >text

Why is my menu sliding along?! -- Why is fixed positioning not working?

Popularity：197 ℃/2024-08-02 16:43:17

Background: Recently in the writing of a H5 page project, there is a menu bar in the head, need to be fixed at the top of the immobile, but after sliding the settings did not come into effect, before the development of a similar fixed failure of the situation, go to a detailed understanding of what may lead to the failure of the fixed positioning of the situation. I hope some of these scenarios can help you. I summarize and explain in detail below will lead to the failure of the situation, then we continue to look down ...

html code:(common to all cases, not repeated below)

<body>
  <div class="parents">
    <div class="fixed"> top fixed menu bar </div>
    <div class="scrollDiv"> I can't fix it master! </div>.
  </div>.
</body>.

The CSS transform, perspective, or filter attributes of the ancestor element cause the

If any ancestor element of an element applies thetransform、perspective maybefilter attribute, etc., the fixed positioning of this element will be positioned relative to the nearest ancestor element with a transformation, not relative to the viewport.

css code:

 * {
      margin: 0;
      padding: 0;
    }

    .parents {
	  // conversions
      transform: translateY(10px)
    }

    .fixed {
      width: 100%;
      position: fixed;
      top: 0px;
      left: 0px;
      background-color: pink;
      text-align: center;
    }

    .scrollDiv {
      width: 100%;
      height: 2000px;
      background: skyblue;
    }
  • When the height of the content area exceeds the scrolling, we can't fix the fixed positioning of the menu bar at the top, it will go up with the scrolling. As shown in the figure below:

The following other cases of the same example map, we do not do more to show, directly give the sample code

The parent element uses thewill-change causality

aliketransformUsewill-change May also result in fixed positioning relative to the element this property is set to, rather than relative to the viewport.

  • Setting transformZ(0) activates slide acceleration, but if fixed positioning is used in the page, it will cause fixed positioning to fail, because setting transformZ causes the set element to fall out of the document flow.

css code example:

   	.scrollDiv {
      will-change: transform;
    }
    .fixed {
      position: fixed;
      top: 10px;
      left: 10px;
      background-color: red;
    }

z-index

  • even thoughz-index will not cause fixed positioning to "fail", but if other elements'z-index values are higher, fixed-positioned elements may be overwritten. Make sure to set thez-index value, which makes the fixed-positioned element visually appear at the top of the page.
    .fixed {
      position: fixed;
      top: 10px;
      left: 10px;
      background-color: red;
      z-index: 1;
    }
    .scrollDiv {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 2;
    }

Elements that can be scrolled use the-webkit-overflow-scrolling

  • This occurs on iOS devices and may affect the behavior of fixed-positioned elements if `-webkit-overflow-scrolling: touch; is used on the ancestor element.

css code:

 .scrollDiv {
      width: 100%;
      height: 2000px;
      background: skyblue;
     -webkit-overflow-scrolling: touch;
  }

Viewport units (vh, vw) in combination with fixed positioning

  • Normally there is no problem, but when using viewport units (such as thevh、vw) to set the size or position of a fixed-positioned element can be problematic when the virtual keyboard pops up or the address bar is shown/hidden.

css code:

.fixed {
      position: fixed;
      top: 10vh; /* 10% of viewport height */
      left: 10vw; /* 10% of viewport width */
      background-color: red;
}

Print or Preview Mode

Fixed positioning may not work as expected in print or print preview mode because many browsers ignore fixed positioning when printing.

Compatibility issues on mobile devices

Browsers on some mobile devices are very sensitive tofixed Positioning support can be problematic, especially when the keyboard pops up or when dealing with complex page interactions.

Screen readers and assistive technology

When using assistive technology such as screen readersfixed Positioning may not present itself in the expected manner.

Write it on the back.

Layout positioning involves a lot of device compatibility issues, and there are a lot of special scenarios that we may not have explained. There may be some standard usage on a certain device will also have an exception, just we only need to be compatible with most of them, and then go to solve the devices that must be compatible. Our development is all about continuous improvement + bug solving.

And finally have you encountered any other reasons why positioning fails? Or have you had any odd style issues in development. Feel free to discuss in the comments section!

<Previous Next>