<html>
<head>
<title>css相对定位和绝对定位</title>
<style type = "text/css" >
body,div {
margin:0;
padding:0;
height:2000px;
}
#div1 {
width:200px;
height:200px;
background-color: red;
position:absolute;
z-index:2;
/*
left:100px;
top:20px;
1.采用相对定位后，left和right， top和bottom只能设置一个
2.相对定位，相对于原来的位置而言。设置相对定位的元素依然会占用原 来的空间。仍在标准流中。
*/
}
#div2 {
width:200px;
height:200px;
background-color:#369369;
position:absolute;
left:20px;
top:20px;
z-index:-1;
/*
3.绝对定位，针对body页面左上角而言的。left看不出来的，
只有top，bottom才可以看出与relative的区别
4.设置为绝对定位的元素不会占用原来的空间，会脱离标准流
*/
}
#div3 {
width:200px;
height:200px;
background-color:blue;
/*
position:fixed;
left:20px;
top:50px;
5.固定定位，与绝对定位一样都会脱离标准流
6.固定定位，针对浏览器窗口而言的。absolute针对body(0,0)而言的。
*/
}
/*
重叠元素的堆叠顺序 z-index ;前提是只有设置了以上三种定位才有用。
设置的数值越大，堆叠越在上层。也可以用负值。
*/
</style>
<meta charset = "utf-8" />
<!--<link rel = "stylesheet" style = "text/css" href = "style/css.css" />-->
</head>
<body>
<div id = "div1" >div1</div>
<div id = "div2" >div2</div>
<div id = "div3" >div3</div>
</body>
</html>
时间： 2024-10-16 19:39:39