position定位都有哪些:
position的含义是指定位类型，取值类型可以有：static、relative、absolute、 fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。
1.position: static(默认）
static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响
2.position:relative(相对定位)
此处的相对并不是相对于哪个父div或子div，相对只是相对于自身原本的位置发生变化。
3.position:absolute(绝对定位)
absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父级来定位；
如果父级都没有position属性，则相对于document来定位最多也就到body；
使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；
4.position:fixed(固定定位)
也是脱离了文档流，与absolute一样，可以设置宽高，但是父级会检测不到定位元素的宽高，所以无法由子元素撑开。
5.inherit
继承父元素的position属性，但需要注意的是IE8已及往前的版本都不支持inherit属性
6.sticky (黏性定位,吸顶效果)
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.top,
.foot {
width: 100%;
height: 200px;
background: red;
border: 1px solid black;
}
.sticky {
width: 100%;
height: 100px;
position: sticky;
top: 0;
background-color: green;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="top"></div>
<div class="top"></div>
<div class="sticky"></div>
<div class="foot"></div>
<div class="foot"></div>
<div class="foot"></div>
<div class="foot"></div>
<div class="foot"></div>
</body>
</html>
|