position:
1. 模块: 提供与元素定位和层叠相关功能,它是核心模块
2. 属性 .box{ position: relative; }
名称 | 定位模型 | 定位 | 作用 | 特点 | |
static | 自然模型 | 静态定位/自然定位/常规定位 | 使元素处于常规流中(块、行垂直排列下去。行内水平从左到右) |
1.忽略top、left、bottom、right或z-index声明 2.两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的 3.具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的效果就是这个块水平居中。 |
|
relative | 相对定位模型 | 相对定位 |
使元素成为containing-block, 官话是可定位的祖先元素 |
1.可以使用top、bottom、left、right、z-index进行相对定位(相对的是:原来它在常规流中的位置) 2.相对定位的元素不会离开常规流(还有它的一亩三分地) 3.任何元素都可以设置为relative,它的绝对定位的后代可以相对于它进行绝对定位 4.可以使浮动元素发生偏移,并控制它们的堆叠顺序。 |
|
absolute | 绝对定位模型 | 绝对定位 | 使元素脱离常规流 |
1.脱离常规流 2.设置尺寸要注意:百分比使谁?最近定位祖先元素 3.如果没有最近定位祖先元素,会认body做爹爹 4.left、right、top、bottom如果设置为auto,它将被打回原形 5.letb如果设置为0,它将对齐到最近定位祖先元素的各边 6.z-index可以控制堆叠顺序,999999 |
|
fixed | 固定定位模型 | 固定定位 | 使元素脱离常规流 |
1.跟absolute的区别:相对于谁做绝对定位 fixed:相对于视口,absolute:相对于最近定位祖先元素 2.固定定位元素不会随着视口滚动而滚动 3.继承absolute特点 |
|
sticky | 磁贴定位模型 | 磁贴定位/粘性定位/吸附定位 | relative和fixed的完美结合,制造出吸附效果(赛场新秀,实力布局糖) |
1.如果产生偏移,原位置还是会在常规流中,一亩三分地留着 2.如果它的最近祖先元素有滚动,那么它的偏移标尺就是最近祖先元素 3.如果最近祖先元素没有滚动,那么它的偏移标尺是视口 4.上下左右的偏移规则 |
|
绝对定位居中妙计:
div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
}
定位+边距居中妙计
.container{
100px;
height: 100px;
}
div{
20px;
height: 20px;
position: fixed;
left: 50px;
top: 50px;
margin-top: 10px;
margin-left: 10px;
}