position 定位
Posted 独孤晓宇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了position 定位相关的知识，希望对你有一定的参考价值。
position属性是指本体相对于上级的定位，position又分绝对定位和相对定位。他的默认值是static，意味着元素没有被定位，出现在文档流中应该出现的位置。如果用position来布局页面，父元素的position属性必须为relative或absolute。行元素加了 position：absolute 后可设置宽和高（加了float和fixed也可以设置宽和高）。
常见属性值：
1。static，无特殊定位，对象遵循文档流。
2.relative， 对象遵循正常文档流。
3.absolute，对象脱离文档流，使用top，right，bottom，left 等属性进行绝对定位。
4.fixed，对象脱离正常文档流，使用top，right，bottom，left 等属性以窗口为参考点进行定位，当文档出现滚动条时，对象不回随着滚动。ie6及以下不支持此参数。
static、relative正常文档流 absolute、fixed脱离文档流。
position：absolute（绝对定位）是基于父容器position：relative的定位
也就是说绝对定位 absolute 要有个参照物，这个参照物就是父容器relative。
如果已经定位的元素里面还要添加元素并想定位的话可以在在想定位的元素里直接加absolute，其父容器不需要再添加relative。
即：absolute里面可以直接添加absolute来进行绝对定位。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
ul li{width: 300px; height: 210px;border: 1px solid #ddd; float: left;
list-style: none; margin-right: 30px;
}
li{position: relative;}
div{width: 100px; height: 100px; background: url("img/QQ截图20161221123126.png") no-repeat;
position: absolute;left: 105px; top: -50px;
}
p{text-align: center;}
.p1{position: absolute; right: 0px; bottom: 0px;}
.span1{position: absolute; left: 0px; bottom: 0px;}
</style>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<ul>
<li>
<div class="d1"><span class="span1">随便写点</span></div>
<br />
<br />
<br />
<br />
<p class="p1">极速定位</p>
<p class="p2">极速定位</p>
</li>
<li>
<div class="d2"></div>
</li>
<li>
<div class="d3"></div>
</li>
</ul>
</body>
</html>
显示如下：
通常我们不会让元素相对于浏览器绝对定位。元素都有各自的布局，我们要让元素基于他的父级来定位，这就要让元素知道哪个是他绝对定位的父级，一般，加了position的会最为定位元素的父级。
如果不是父子级关系，其他元素为relative，那里面的sbsolute会以浏览器定位。
伪元素+雪人定位练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.css"/>
<style type="text/css">
div{width: 100%; height: 340px; background: pink; position: relative;}
div::before{
content: ""; width: 70px; height: 70px;
background: url("img/QQ截图20161221172609.png") no-repeat;
position: absolute; bottom: 0px; right: 150px;
}
div::after{
content: ""; width: 100%; height: 14px; background: url("img/QQ截图20161221173421.png");
position: absolute;bottom: 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
显示如下：
以上是关于position 定位的主要内容，如果未能解决你的问题，请参考以下文章