首页 > 代码库 > 绝对定位和固定定位
绝对定位和固定定位
<!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>
绝对定位和固定定位