position:relative/absolute

详解定位与定位应用

代码

<! 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 >
     < title > 无标题页 </ title >
     < style  type ="text/css" >
#box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
#box_1 {z-index:100;}
#box_2 {z-index:1;}
#a, #b {position:absolute; width:100px; height:300px; }
#a {background:#c00; }
#b {background:#0c0; left:50px;}
     </ style >
</ head >
< body >
< div  id ="box_1" >  
   < div  id ="a" > 这是第一个块 </ div >  
</ div >  
< div  id ="box_2" >  
   < div  id ="b" > 这是第二个块 </ div >  
</ div >
</ body >
</ html >

通过设置父DIV的z-index    堂兄弟之间的顺序不能被重组,何不把父辈的等级做一次重组呢
设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的。

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
< html >   
<!--  www.div-css.com 网站标准化   2007-4-16  -->   
< head >   
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />   
< title ></ title >   
  
< style  type ="text/css" >   
li  { height : 100px ;  margin : 0 5px 0 0 ;  float : left ;  width : 100px ; background : #000 ; }  
li:hover  { position : relative ; }
li span  {  display : none ; }
li:hover span  { display : block ; width : 200px ;  height : 200px ;  background : #c00 ;  z-index : 100 ; position : absolute ;  top : 0 ;  left : 100px ; }
</ style >   
</ head >   
  
< bodyz >   
< ul >  
< li >< span > 第一块 </ span ></ li >  
< li >< span > 第二块 </ span ></ li >  
< li >< span > 第三块 </ span ></ li >  
< li >< span > 第四块 </ span ></ li >  
< li >< span > 第五块 </ span ></ li >  
</ ul >  

< script  type ="text/javascript" >   

  </ script >
</ body >   
</ html >   

 

父类 relative 子类 absolute 子原点是父(TOP LEFT)的左上角(TOP LEFT)父块的content为基准
这个快设置了absolute而没有父块设置relative  原点是body

转载于:https://www.cnblogs.com/reommmm/archive/2010/01/22/1654044.html