定位
固定在屏幕中的某个位置，叫做定位
定位的主要价值是移动位置，让盒子到我们想要的地方去
定位属性
元素的定位属性主要包括定位模式和边偏移两个部分
边偏移
边偏移有四种属性：
top:顶端偏移量，定义元素相对于其父元素上边线的距离
bottom:底部偏移量，定义元素相对于其父元素下边线的距离
left:左侧偏移量，定义元素相对于其父元素左边线的距离
right:右端偏移量，定义元素相对于其父元素右边线的距离
定位模式
在CSS中，position属性用于定位元素的定位模式
其常用值：
static:自动定位（默认）
relative:相对定位，相对于其原文档流的位置进行定位
absolute:绝对定位，相对于其上一个已经定位的父元素进行定位
fixed：固定定位，相对于浏览器窗口进行定位
静态定位（static）
静态定位是所有元素的默认定位方式，此时将元素定位与静态位置。而所谓的静态位置就是各个元素在HTML文档流中默认的位置。此时，无法通过边偏移属性定位元素的位置。这种模式一般用于清除定位。
相对定位
相对定位是相对于元素原文档流的位置进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 50px;
height: 50px;
background-color: pink;
}
div:nth-child(2){
background-color: purple;
position: relative;
left: 20px;
top: 30px;
}
</style>
</head>
<body>
<div></div>
<div>2</div>
<div></div>
</body>
</html>效果：
注意：相对位移可以通过边偏移移动位置，但其原来说占用的位置依旧继续占用。并且，每次移动的位置，是以其左上角为基点移动。所以，相对定位的盒子仍然在标准流之中，它后面的盒子人就以标准流的方式对待他。
绝对定位
相对于其上一个已经定位的父元素进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.first{
width: 100px;
height: 100px;
background-color: pink;
}
.middle{
width: 150px;
height: 120px;
background-color: yellow;
position: absolute;
left: 10px;
top: 20px;
}
.last{
width: 200px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="middle">middle</div>
<div class="last"></div>
</body>
</html>效果：
注意：绝对定位是完全脱离标准流的，不占用位置，对其下面的其他元素无影响。
如果父亲没有定位，此时以浏览器为准
如果父亲有定位则根据最近的已定位（绝对、固定或相对定位）的父级元素进行定位
子绝父相
一般来说，如果子级是绝对定位的话，父级要用相对定位
绝对定位水平垂直居中
实现居中对齐时，普通的盒子将margin的左右改为auto就可以，但对于绝对定位，这不起作用
需要使绝对定位的盒子水平居中，则：设定left=父盒子的一半-自己大小的一半
同理，垂直居中则：top=父盒子高度的一半-自己高度的一半
/*假设自己宽度为100px，高度为80px*/
left:50%;
margin-left:-50px;
top:50%;
margin-top:-40px;
固定定位
固定定位以浏览器窗口作为参照物来定义网页元素，当position属性的取值为fixed时，为固定定位。
当对元素设置固定定位之后，它将脱离标准文档流的控制，始终依据浏览器窗口作为参照物来定义自己的显示位置。不管浏览器滚动条如何滚动，窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
注意：固定定位的元素跟父亲没有任何关系，只认浏览器。固定定位完全脱标，不占有位置，不随着滚动条滚动
i6等低版本浏览器不支持固定定位
注意：固定定位的盒子一定要写宽和高，除非有内容物撑开
叠放次序
当对多个元素同时设置定位时，定位的元素直接可能会有重叠
在CSS中，如果想设置重叠元素的堆叠顺序，则可以对定位元素应用z-index层叠等级属性，其值可以是正整数、负整数、0
z-index默认为0，其取值越大，定位元素在层叠元素中越居上
如果值相同，则按照书写顺序，后面的元素在上
z-index的值没有单位
只有相对定位、绝对定位、固定定位有此属性
总结
扫一扫
2164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
