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:

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

Summary of shell's method for determining whether a variable is empty

How to solve the problem of absolutely positioned elements mysteriously disappearing or being blocked in IE6/7

Summary of shell's method for determining whether a variable is empty

Teach you to use dozens of lines of js to achieve cool canvas interactive effects

jQuery implements the drop-down box for selecting the place of residence

Perfect solution to the problem that Navicat cannot connect after installing mysql in docker

You Probably Don’t Need to Use Switch Statements in JavaScript

MySql learning day03: connection and query details between data tables

Nginx handles http request implementation process analysis

Vue implements a simple timer component

How to add a certificate to docker

Detailed explanation of Nginx's control over access volume

Recommend

Introduction to MySQL statement comments

How to deploy MySQL 5.7 & 8.0 master-slave cluster using Docker

A brief discussion on how to choose and combine div and table

How to use bar charts in Vue and modify the configuration yourself

Linux disk space release problem summary

How to develop Java 8 Spring Boot applications in Docker

Detailed explanation of vue.js dynamic components

Introduction to using window.open, a jump menu that opens in a new window

How to batch generate MySQL non-duplicate mobile phone number table example code

How to use Dayjs to calculate common dates in Vue

Solve the problem that MySQL read-write separation causes data not to be selected after insert

In-depth understanding of MySQL various locks

How to let DOSBox automatically execute commands after startup

How to enable Swoole Loader extension on Linux system virtual host

Installation tutorial of mysql 8.0.11 compressed version under win10