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
CSS3 analysis of the steps for making Douyin LOGO
"Tik Tok" is also very popular and is s...
Detailed explanation of the usage and difference between nohup and & in Linux
Example: We use the Python code loop_hello.py as ...
How to implement remote access control in Centos 7.4
1. SSH remote management SSH is a secure channel ...
Founder font library Chinese and English file name comparison table
Founder Type Library is a font library developed ...
Example of implementing TikTok text shaking effect with CSS
In daily development, front-end students often ar...
Parameters to make iframe transparent
<iframe src="./ads_top_tian.html" all...
MySQL 5.7.19 installation tutorial under Windows 10 How to change the root password of MySQL after forgetting it
Take MySQL 5.7.19 installation as an example, fir...
CSS simulates float to achieve the effect of center text surrounding the image on the left and right
What is text wrapping around images? This is the ...
How to inherit CSS line-height
How is Line-height inherited?Write a specific val...
MySQL 8.0.22 winx64 installation and configuration method graphic tutorial
The database installation tutorial of MySQL-8.0.2...
Detailed explanation of how to set the change value within a specified time in Zabbix
Background description: On an existing load balan...
How to run nginx in Docker and mount the local directory into the image
1 Pull the image from hup docker pull nginx 2 Cre...
React tips teach you how to get rid of hooks dependency troubles
A very common scenario in react projects: const [...
Common symbols in Unicode
Unicode is a character encoding scheme developed ...
How to draw a cool radar chart in CocosCreator
Table of contents Preface Preview text Graphics C...