position定位
2016-11-07 本文已影响10人
微行丶简
position属性用来规定元素的定位类型。
| 属性值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。 |
| fixed | 生成绝对定位元素，相对于浏览器窗口进行定位 |
| relative | 生成相对定位元素，相对于其它正常位置进行定位 |
| static | 默认值，没有定位，元素出现在正常的流中 |
| inherit | 规定应该从父元素继承position属性的值 |
注意
- 绝对定位或固定元素会生成一个块级框，而不论该元素本身是什么类型。
- 相对定位会相对于它在流中的默认位置偏移。
- static情况下，忽略top,bottom,left,right,z-index声明。
应用场景
- absolute
相对于父级元素右对齐
h2.pos_abs
{
position:absolute;
right:0px;
top:150px
}
- fixed
Dialog浮层
.dislike-bg{
display: none;
position: fixed; //相对于浏览器的窗口定位
width: 100%;
height: 100%;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: rgba(0,0,0,0.3);
z-index: 1999;
}
