Detailed explanation of how to solve the position:fixed fixed positioning offset problem
questionCSS 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:
In elements whose transform is not none, positioning is affected. SolutionWithout 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
Recommend
Summary of the top ten problems of MySQL index failure
Table of contents background 1. The query conditi...
How to create, save, and load Docker images
There are three ways to create an image: creating...
Vue implements login verification code
This article example shares the specific code of ...
Detailed explanation of the entry-level use of MySql stored procedure parameters
Use of stored procedure in parameters IN paramete...
Explore the characteristics and expressions of different spaces in HTML (recommended)
I. Overview When writing HTML templates, spaces a...
Some findings and thoughts about iframe
This story starts with an unexpected discovery tod...
Solution to the problem that Docker cannot stop or delete container services
Preface Today, a developer gave me feedback that ...
js to realize payment countdown and return to the home page
Payment countdown to return to the home page case...
Docker container source code deployment httpd use storage volume to deploy the website (recommended)
Table of contents Deploy httpd with docker contai...
MySQL replication advantages and principles explained in detail
Replication is to transfer the DDL and DML operat...
Detailed explanation of MySQL sql99 syntax inner join and non-equivalent join
#Case: Query employee salary levels SELECT salary...
VUE+Canvas implements the game of God of Wealth receiving ingots
Welcome to the previous canvas game series: 《VUE ...
Achieve 3D flip effect with pure CSS3 in a few simple steps
As a required course for front-end developers, CS...
Specific use of nginx keepalive
The default request header of the http1.1 protoco...
SQL query for users who have logged in for at least n consecutive days
Take 3 consecutive days as an example, using the ...