絕對定位和固定定位
阿新 • • 發佈：2017-07-14
auto osi doctype box order z-index itl 其它 右下角
/*一般情況下父元素用position:relative,子元素用position:absolute，相互配合使用*/
left:50px;
z-index:-1;/*z-index也是必須配合上面的position定位來使用的，數字越大誰就在上面*/
}
.div3{
background:blue;
}
#box{
width:400px;
height:400px;
border:1px #000000 solid;
/*margin:100px auto;盒子距離瀏覽器的位置上下100px，auto居中,margin不能和position：absolute一起用*/
left:500px;
position:relative;
}
#fix{
width:100px;
height:100px;
border:1px #000000 solid;
position:fixed;/*固定定位：脫離文檔流，其它內容滾動的時候，它一直在頁面上不動*/
bottom:0px;
right:0px;/*右下角*/
}
</style>
</head>
<body>
<div id="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<div id="fix"></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>絕對定位和固定定位</title>
<style>
body{
height:2000px;/*加上高度出現滾動條*/
}
div{
width:100px;
height:100px;
}
.div1{
background:red;
}
.div2{
background:yellow;
position:absolute;
/*position:absolute;絕對定位脫離文檔流,找父元素有沒有定位，如果有就相對於父元素定位，沒有就繼續找，往父元素的父元素找，如果都沒有就相對於body進行定位*/
/*一般情況下父元素用position:relative,子元素用position:absolute，相互配合使用*/
left:50px;
z-index:-1;/*z-index也是必須配合上面的position定位來使用的，數字越大誰就在上面*/
}
.div3{
background:blue;
}
#box{
width:400px;
height:400px;
border:1px #000000 solid;
/*margin:100px auto;盒子距離瀏覽器的位置上下100px，auto居中,margin不能和position：absolute一起用*/
left:500px;
position:relative;
}
#fix{
width:100px;
height:100px;
border:1px #000000 solid;
position:fixed;/*固定定位：脫離文檔流，其它內容滾動的時候，它一直在頁面上不動*/
bottom:0px;
right:0px;/*右下角*/
}
</style>
</head>
<body>
<div id="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<div id="fix"></div>
</body>
</html>
絕對定位和固定定位