Level (Z-index) problem caused by negative margin

This article mainly introduces the solution of the level (Z-index) problem caused by margin negative value, the friend who need can refer to the following code:

Copy Code

The code is as follows:

<p style= "height:100px;width:200px; Border:solid 1px black; ">
<p style= "background-color:red;margin-top: -5px" mce_style= "Background-color:red;margin-top: -5px" >
<a href= "http://www.jb51.net/" mce_href= "http://www.jb51.net/" > Scripting House </a></p>
</p>

Under IE6 and IE7, the inner container is covered by the outer layer:

Under IE8 and FF, the outer container is covered by the inner layer:

Really crazy Ah, if you want to reach the outer layer of the IE8 of the container is covered by the effect, IE7 can be triggered by the inner layer of layout solution, but IE6 but not, only in the inner layer using position:relative to solve the problem, of course position: Relative also solves the IE7 problem, because position:relative itself can trigger layout.
Look at the code:

Copy Code

The code is as follows:

<p style= "height:100px;width:200px; Border:solid 1px black; ">
<p style= "background-color:red;margin-top: -5px;position:relative" mce_style= "Background-color:red;margin-top: -5px;position:relative ">
<a href= "http://www.jb51.net/" mce_href= "http://www.jb51.net/" > Scripting House </a> </p>
</p>

Of course, to IE8, FF to achieve IE6, IE7 effect as long as the outer layer plus overflow:hidden can be, see the code

Copy Code

The code is as follows:

<p style= "height:100px;width:200px; border:solid 1px black; Overflow:hidden" >
<p style= "background-color:red;margin-top: -5px; mce_style=" background-color:red;margin-top: -5px; " >
<a href= "http://www.jb51.net/" mce_href= "http://www.jb51.net/" > Script home </a> </p>
</p