- static 自然模型
- relative 相对定位模型
- absolute 绝对定位模型
- fixed 固定定位模型
- stick 磁贴定位模型
- inherit 继承模型
定位相关概念
document tree文档树
html文档处理的时候是以树形结构来处理的
normal-flow自然顺序
由上到下由左到右的顺序
containing-block容器块
相对某个块进行定位的容器(祖先元素)
float浮动
float 属性定义元素在哪个方向浮动，只能左右，不能上下。碰到另一个浮动框，浮动停止，碰到不浮动的会覆盖，以往这个属性总应用于图像，使文本围绕在图像周围，会脱离标准文档流，但是不会脱离文字流，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动元素会影响后面的元素
static 自然模型
作用:
使元素定位于 常规/自然流 中
(块、行垂直排列下去,行内水平从左到右)
特点:
- 忽略top,bottom,left.right或者z-index声明
- 两个相邻元素如果都设置了外边距margin,那么最终外边距=两者外边距中最大的
- 具有固定width和height值的元素,如果把左右外边距设置为auto,会造成这个块居中
relative 相对定位模型
作用:
使元素成为containing-block(可定位的祖先元素)
特点:
- 可以使用top/right/bottom/left/z-index进行相对定位，相对自己在常规流中的定位
- 相对定位的元素不会离开常规流——不离不弃
- 任何元素都可以设置为relative,他的绝对定位后代都可以相对于它进行绝对定位——超好用
- 可以使浮动元素发生偏移，并控制它们的堆叠顺序
absolute 绝对定位模型
作用:使元素脱离常规流
要想给某个元素指定特定的位置，就需要用到绝对定位属性position：absolute；
特点:
- 脱离常规流
- 设置尺寸要注意百分比是相对最近定位的祖先元素(如relative)
- left right top bottom如果设置为0,它将对齐到最近定位的祖先元素(如relative)的各边——可以用来居中
- left right top bottom如果设置为auto将会变回原样
- 如果没有最近定位的祖先元素会认<body>为祖先元素
- z-index可以控制堆叠顺序
如:
.parent {
position:relative; /*相对定位的祖先元素*/
width:200px;
height:150px;
background:blue;
}
.child {
position:absolute;
width:80px;
height:80px;
background:red;
/*下面设置可以使得元素居中*/
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
}
fixed 固定定位模型
作用和绝对定位一样
特点:
- 脱离常规流
- 相对于视口做绝对定位,不随视口滚动而滚动(就像贴在屏幕上一样)
- 要absolute的全部特点
stick 磁贴定位模型
作用:类似relative和fixed的完美结合,有吸附的效果
一般不建议使用,使得代码没那么好维护,也可以通过js实现
特点:
- 如果产生偏移,原位置还在常规流中
- 如果它的最近祖先元素有滚动,那么它的偏移标尺就是最近的祖先元素
- 如果最近祖先元素没有滚动,那么它的偏移标尺是视口
- 上下左右的偏移规则,必须设置偏移量才要吸附效果
网友评论