CSS小结6
css小结6
1子元素相对父元素定位：
父元素{position:relative;}
子元素
{
position:absolute;
/定义top,bottom,left和right/
}
<styletype="text/css">
.father
{
position:relative;
width:160px;
height:30px;
background-color:#00FFFF;
}
.son
{
position:absolute;
bottom:-30px;
right:65px;
width:30px;
height:30px;
background-color:red;
}
</style>
</head>
<body>
<divclass="father">
<divclass="son"></div>
</div>
注意position:absoulte会把元素转换为块元素
2子元素相对祖先定位，道理是一样的：
<styletype="text/css">
.grandfather
{
position:relative;/*设置相对定位*/
width:200px;
height:160px;
background-color:blue;
}
.father
{
position:relative;/*设置相对定位*/
width:120px;
height:30px;
background-color:#00FFFF;
}
.son
{
position:absolute;/*设置绝对定位*/
bottom:-20px;
right:50px;
width:20px;
height:20px;
background-color:red;
}
</style>
</head>
<body>
<divclass="grandfather">
<divclass="father">
<divclass="son"></div>
</div>
</div>
如果删除了父亲元素的position:relative，则SON是相对于GRANDFATHER定位；
3Z-INDEX:
指明元素的堆叠顺序：
只有在定义position:relative，fixed,absoulte下起作用，Z-INDEX值为正数的元素在Z-INDEX=0的上面，负数的在下面；
div
{
width:100px;
height:100px;
font-size:50px;
position:absolute;
}
#A{background-color:red;top:10px;left:10px;}
#B{background-color:orange;top:40px;left:40px;}
#C{background-color:blue;top:70px;left:70px;}
</style>
</head>
<body>
<divid="A">A</div>
<divid="B">B</div>
<divid="C">C</div>
：
这个时候A元素最底，B元素上面，C元素最上面；如果A的Z-INDEX：3，Z-INDEX;2,zindex-:1,则A,B,C元素反过来，A在最上面；