CSS Production page: position:relative

Article Introduction: CSS experience to make the best use of position:relative.

May be a personal habit, I personally write CSS style when the position:relative are rarely used. Not to be forced to use, because this thing in the face of IE uncle always will be pushed all kinds of, such as multiple positon nesting will produce similar z-index priority of runaway, do not know other coder have encountered this problem? I have not met 1 times anyway.

Take a chestnut as follows: HTML code abridged, you know.

ul.pp
    li 大宝   span 大宝的屁屁
    li 二宝   span 二宝的屁屁
    li 三宝   span 三宝的屁屁

From the above code is not a problem, the problem is to put his clothes (CSS), because some demand, you speak Li's CSS position:relative,
So Li is stupid, this time how do you set Li's z-index for most of the next Li after the content.
Do not understand the meaning of the above expression can be seen in the figure below.

CSS Code

.pp{
	width:300px;
	margin:50px auto;
	background:#fff;
	height:300px;
	padding:10px;
}
.pp li{
	border:1px solid #ccc;
	margin-bottom:10px;
	height:30px;
	position:relative;
	background:#fff;
	z-index:9;
}

.pp span{
	display:block;
	width:40px;
	height:40px;
	background:#f09;
	position:absolute;
	right:10px;
	bottom: -20px;
	z-index:10;
}

As shown, the left side is the effect of chrome, the right side is the effect of IE6, can be seen, when the Li set positon:relative regardless of the elements set z-index for how big, are changed after the Li content. I have again put the above word again to play = =

Solution

From the visual understanding, such a situation like AI (Illustrator) in the same layer, a layer higher than a layer, also like a sandbox, the internal z-index is how can not exceed the next layer of z-index.
It is best not to add position:relative to a list of Li or Div, which has always been a headache for IE, to avoid such a situation to solve. (In fact, should not be a bug, should be the browser developers understand the difference).

Of course There is another way , because the next Li set the position cover the previous position Li, so long as to avoid position cover position can barely achieve this situation. So you just need to set up a layer of div outside the Position:absolute dom, so that you don't cover the position:absolute of the previous li.

Another method is to be in a particular case, such as a hover event, such as a triggered pop-up window (show more information),
This time I was to achieve, when hover to Li add a class "hover", and then as long as the definition of hover is position:relative can be, the advantage is hover when other Li did not position: Relative, then there is no previous bug.
For advanced browsers can write directly: hover even can be separated from JS efficiency will be higher

Position:relative in: The magical uses of hover

First look at the picture below, the left side of such a button do not know should be in some effect of contact? Like a button to the left and right,

Carefully observe that the line in the middle of the button is shared, but when pressed, the color becomes darker.
Implementation of a lot, I usually use a negative margin on one of the buttons, and then in: hover effect on the foot ( because IE6 only support a on the hover, it is generally used a), in fact very simple is in hover time, give it to set position: Relative, and then set the Z-index to a number to achieve.

By the way, Apple's navigation in the image above can also be used to achieve results. Do you feel ^__^?