How to solve the problem of absolutely positioned elements mysteriously disappearing or being blocked in IE6/7
|
1. When the width of the adjacent floating layer of the absolutely positioned layer is not equal to the width of the parent layer, and the float is not cleared, the display is consistent in IE6/7 and FF; 2. When the width of the adjacent floating layer of the absolute positioning layer is not equal to the width of the parent layer, when the float is cleared, IE6/7 does not display the absolute positioning layer, but FF does; 3. When the width of the adjacent floating layer of the absolute positioning layer is equal to the width of the parent layer, and the floating is not cleared, IE6 does not display the absolute positioning layer, but IE7/FF displays it; 4. When the width of the adjacent floating layer of the absolute positioning layer is equal to the width of the parent layer, when the float is cleared, IE6/7 does not display the absolute positioning layer, but FF does; The solution to this BUG is very simple. Just make sure that the absolutely positioned layer is not placed next to the floating layer. There is also an even simpler method, which is to add a blank div between the absolutely positioned element and other elements. Let's take a look at the phenomenon where absolutely positioned elements mysteriously disappear and are blocked. First, let's understand the several positioning features involved: 1. The default z-index value of a relatively positioned element is 0. 2. When two relative positioning appear at the same time, the z-index of the code later takes precedence. 3. The child follows the z-index set by the parent; if the child sets absolute positioning and z-index, it can break through the parent to display. See the following code: Copy code The code is as follows:<div style=”position:relative; background:#FF0000; width:200px; height:100px;”> <div style="position:absolute; background:#FFFF00; width:49px; height:50px; left:106px; top:310px; z-index:100"></div> </div> <div style=”position:relative; background:#000000; width:200px; height:100px;”></div> <div style=”position:relative; background:#9900FF; width:200px; height:100px;”></div> Code explanation: There are three adjacent relatively positioned layers above. A layer with absolute positioning relative to the first layer is added. In theory, this absolutely positioned element is above the three relatively positioned elements. However, it is not displayed in reality. Trying to set the z-index value also has no effect. The solution to this bug on the Internet is generally to use a hack to make B a negative value to reduce the level of B in IE. However, this method creates a new IE bug when the z-index is negative. According to the characteristics of positioning, this IE bug can be avoided. On the surface, the lower layer covers the upper absolutely positioned layer. In fact, the lower layer covers the absolutely positioned parent layer. You only need to set the z-index of the parent layer to be larger than that of the layer behind it. |
<<: Example code for implementing a hollow mask layer with CSS
>>: Detailed explanation of the process of docker packaging Python environment
Recommend
Implementation of Grid common layout
No gaps on both sides, gaps between each column w...
How to configure eureka in docker
eureka: 1. Build a JDK image Start the eureka con...
What is the relationship between Mapper sql statement fields and entity class attribute names
background: 1. There is a notification table in t...
How to convert rows to columns in MySQL
MySQL row to column operation The so-called row-t...
Vue song progress bar sample code
Note that this is not a project created by vue-cl...
Detailed explanation of CSS margin overlap and solution exploration
I recently reviewed some CSS-related knowledge po...
Based on JavaScript ES new features let and const keywords
Table of contents 1. let keyword 1.1 Basic Usage ...
VUE+Express+MongoDB front-end and back-end separation to realize a note wall
I plan to realize a series of sticky note walls. ...
Summary of commonly used time, date and conversion functions in Mysql
This article mainly summarizes some commonly used...
Detailed explanation of Nginx process management and reloading principles
Process structure diagram Nginx is a multi-proces...
How to use libudev in Linux to get USB device VID and PID
In this article, we will use the libudev library ...
Mini Program natively implements left-slide drawer menu
Table of contents WXS Response Event Plan A Page ...
Use of Linux chkconfig command
1. Command Introduction The chkconfig command is ...
MySQL database query performance optimization strategy
Optimize queries Use the Explain statement to ana...
Detailed analysis of Vue child components and parent components
Table of contents 1. Parent components and child ...