在IE下缺省值为0;
同级关系,大的在上;
非同级关系或非父子关系元素,须比较其为兄弟关系的两个祖先元素的z-index,
原则是:值大的元素所有的后代元素,均超过值小的元素及其后代元素。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ie6兼容:z-index</title> </head> <style> div{ width:100px; height:100px;} .father1{ background:#FF6633; position:relative; z-index:1;} .father1-child{ position:absolute; top:10px; left:10px; background:#0000FF; color:#fff; z-index:999;} .father2{ background:yellow; z-index:5;position:relative;} </style> <body> <div class="father1"> <div class="father1-child">father1-child</div> </div> <div class="father2">father2</div> </body> </html>
想父1层的子层越过父2层,则调整他们的z-index大小