Detailed explanation of how to solve the position:fixed fixed positioning offset problem

question

CSS fixed positioning position:fixed is very easy to use. It is positioned relative to the browser's viewport. top:0;left:0 means in the upper left corner.

<body>
  <div class="container">
  </div>    
</body>    
<style>
  .container{
    width: 100px;
    height: 100px;
    background: #888;
    position: fixed;
    top: 100px;
    left: 100px;
  }
</style>

When the parent element sets transform

<body>
    <div class="BFC-box">
      <div class="container"></div>
    </div>
</body>
<style>
  .BFC-box{
    margin:200px;
    height: 200px;
    width: 200px;
    border:2px solid red;
    transform: scale(1);
  }
  .container{
    width: 100px;
    height: 100px;
    background: #888;
    position: fixed;
    top: 100px;
    left: 100px;
  }
</style>

The fixed element is now positioned relative to its parent element.

This is really annoying, because transform elevates the status of an element, as described in the W3C specification:

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 positioned descendants

In elements whose transform is not none, positioning is affected.

Solution

Without affecting the layout, you can directly move the element to be positioned under the body:

<body>
  <div class="BFC-box"></div>
  <div class="container">
  </div>    
</body>

If it is inconvenient to operate elements in the component, you can use js, taking vue as an example:

<div ref="container" class="container"></div>
mounted(){
  document.body.append(this.$refs['contaier'])
}

This is the end of this article on how to solve the position:fixed fixed positioning offset problem. For more relevant position:fixed fixed positioning offset content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Summary and practice of javascript prototype chain diagram

>>: MySQL Basic Tutorial: Detailed Explanation of DML Statements

An example of using CSS3 animation to achieve the effect of a circle expanding from small to large and spreading outward

Detailed explanation of how to solve the position:fixed fixed positioning offset problem

question

Solution

An example of using CSS3 animation to achieve the effect of a circle expanding from small to large and spreading outward

Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging

Example of adding multi-language function to Vue background management

Two ways to implement text stroke in CSS3 (summary)

Detailed explanation of the difference between Mysql temporary table and partition table

Comprehensive website assessment solution

Getting Started Tutorial on GDB in Linux

Graphic tutorial on installing the latest version of MySQL server on Windows 7 64 bit

Analysis of the Principles of MySQL Slow Query Related Parameters

Vue implements three-level navigation display and hiding

Recommend

How to forget the password of Jenkins in Linux

How to clear the cache after using keep-alive in vue

Tutorial on installing Apache 2.4.41 on Windows 10

CSS Tutorial: CSS Attribute Media Type

How to run sudo command without entering password in Linux

Introduction to commonly used fonts on the Web (fonts supported by iOS and Android browsers)

A brief discussion on the magical slash in nginx reverse proxy

How to build sonarqube using docker

10 ways to view compressed file contents in Linux (summary)

Introduction to the use of the indeterminate property of the checkbox

js to realize a simple puzzle game

How to build a multi-node Elastic stack cluster on RHEL8 /CentOS8

Five ways to achieve automatic page jump in HTML

Linux system (Centos6.5 and above) installation jdk tutorial analysis