定位
2017-04-17 本文已影响0人
洛洛kkkkkk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
/*定位
position属性：
1、相对定位：相对于自身的一个定位。
①给父级设置相对定位之后，子级会跟随父级去移动
②给元素设置相对定位之后，不会影响其他元素的位置（没有脱离文档流，还占原来的空间）
③数值可以为负数
top代表向下
right代表向右
left代表向右
bottom代表向上
相对于自身的位置移动
2、绝对定位：相对于定位父级
定位父级就是带有定位的父级
相对于定位父级左上角的位置（如果没有定位父级，则是在？窗口？左上角）
①绝对定位是脱离文档流的，已经不占用原来的空间。
②定位在不设置top等方向的时候，位置不会发生变化
③定位的层级是要比float文本的层级要高，可以遮挡住它们
④绝对定位的元素如果没有定位父级，会相对于html文档来定位
3、固定定位
固定定位的元素在窗口的位置始终不变。
*/
body{
height: 2000px;
}
.redDIv{
width: 300px;
height: 300px;
background-color: red;
/*相对定位*/
/*position: relative;
top:100px;
left:100px;*/
/*绝对定位*/
/*position: absolute;
left: 100px;
top: 100px;*/
position: fixed;
top: 0;
left: 0;
}
.bigDiv{
height: 500px;
width: 500px;
border: 20px blue solid;
position: relative;
}
.big2{
width: 350px;
height: 350px;
border: 10px solid purple;
position: relative;
top: 0;
left: 0;
z-index: 10;
}
.greenDiv{
width: 80px;
height: 100px;
background-color: green;
position: relative;
top: 0;
left: 0;
/*z-index
代表层级，数字越大，层级越高
必须用于定位元素
子父级关系的元素，不管设置父级的z-index有多大，都会在子级的下面*/
z-index: 3;
}
.yellowDiv{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<!--<div class="bigDiv">
<div class="redDIv">
</div>
</div>-->
<div class="big2">
<div class="greenDiv">
</div>
<div class="yellowDiv">
</div>
</div>
</body>
</html>
