CSS的六种定位模型
css支持6种定位模型
- 静态
- 绝对
- 固定
- 相对
- 浮动
- 相对浮动
设定位置
position:static;可以取消元素的定位设置,使之恢复为原先在常规流中的显示方式.static是默认值.
position:relative;可以使元素相对于常规流的位置偏移一定距离.
position:absolute;可以使元素相对于常规流的位置或最近定位祖先元素的位置偏移一定的距离.
position:fixed;可以使元素相对于窗口偏移一定的距离.
z-index可以设置元素的堆叠顺序,数值越大,元素越靠上.
最近定位祖先元素
- 如果设定位置的元素没有定位祖先元素,那么
<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素. - 最近定位元素必须是有效的祖先元素(relative|absolute|fixed),css不支持相对于文档中任意元素进行定位的方法.
- position:relative;是一个非常好的创建定位祖先元素的方法,因为它不会离开常规流.使用这种方法,能够创建出既保持常规流又实现绝对定位的布局.
原子显示
设定了位置的元素是原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.通过使用相对定位,绝对定位和固定定位模式,就可以将元素设置为原子显示,设置为overflow:scroll|auto的块级元素也是原子显示的
而没设定位置的静态块级,当发生重叠时,他们的行内内容不会重叠,但是他们的边框和背景会发生重叠,但文字不会.
z-index
适用于所有元素,默认auto
- z-index不是全局属性,而是相对于设置了数字值z-index的最近定位祖先元素而定.根元素html会创建根堆叠上下文.每一个指定数字值z-index的设定位置元素都会创建一个本地的局部的堆叠上下文.
- 静态定位元素按照文档出现顺序从后往前进行堆叠.
- 设定位置元素忽略文档元素出现顺序,而是根据z-index值由小到大的顺序从后往前堆叠.负值的设定位置元素位于静态定位元素和非设定位置浮动元素之下
一 静态定位模型
position:static;默认是static;
- 静态元素的开始位置由前一个静态元素的位置确定.静态元素的
尺寸,内边距,边框,和外边距决定了下一个元素的开始位置. - 相邻元素的垂直外边距会
合并在一起,最终的外边距是两个相邻元素外边距的较大值 - 将左右外边距设置为auto,可以使
已设定尺寸的静态块级元素居中显示.
二 绝对定位模型
position:absolute;
百分数是相对于最近定位祖先元素的尺寸而言,而非父元素的尺寸.- 将元素的left,right,top,bottom,设置为
auto,可以使它恢复原先在常规流中的位置. - 与浮动元素不同,绝对元素不会自动排列.不会受其他元素影响,也不会影响别的元素.
- 如果一个元素的所有子元素都设置为绝对定位,那么它的高度会变为
0,所有它的子元素都离开了常规流. - 如果不存在定位祖先元素,会根据
<body>来定位
绝对定位居中,一般元素
div{
position:absolute;
width:200px;
height:200px;
margin:0 auto;
border:1px solid blue;
/*left:0;*/ 这两条没用,没有影响
/*right:0;*/
}
绝对定位居中,静态行内元素
对于静态行内元素,如em,strong,span等,但是不包括行内可替换元素(input,img,textarea等),使用绝对定位模式absolute时,width和right可以使用为了要居中,需要额外的加上left:0;和right:0;使margin:0 auto;可以正常的生效.
注意,这里left和right必须是0才行.
#em{
position:absolute;
width:200px;
height:200px;
margin:0 auto;
border:1px solid blue;
left:0;
right:0;
}
三 固定定位模型
position:fixed;可以将任意元素变为固定位置元素
- 切记:固定定位的元素位置是相对于
窗口而定,而非相对于最近定位祖先`,而且元素不会随页面滚动而滚动. - 因为它是相对页面来定位,所以
不需要最近定位祖先 - 设置时最好以top,left来进行偏移定位,当同时设置top,left,bottom,right时,会
优先使用top和left的值,只有当top和left不存在时,bottom和right才会生效
四 相对定位
position:relative;
- 使用left和top来改变元素位置,left和top默认是auto,auto会使相对定位元素保持在常规流中原有位置.
- 任何元素都可以设置position:relative;从而其绝对定位的后代元素都可以相对于它进行定位.
五 浮动定位与复位
使用float:left;和float:right;可以使元素离开常规流.
- 使用float:none;默认是none,可以覆盖元素的其他浮动规则,也可以避免继承浮动
- 浮动元素不会影响块级框的位置,而只影响行内元素
- clear:left;clear:right;clear;both;
- 任意元素都可以设置为浮动元素,clear适用于表格,块级元素和浮动元素
- clear 不适用于
行内,绝对定位或固定定位的元素
六 相对浮动定位
使用float可以使一些元素成为浮动元素,通过relative可以浮动元素设置为相对定位,相对浮动元素仍然位于浮动元素所在的常规流中,可以使用left和top设置它在流中的偏移位置.
- 只有positon:relative;和position:static;适用于浮动元素.而设定为absolute和fixed时,显示结果是不确定的.
零散
在css中,如果参数值是0的话,不要加单位,
浏览器在渲染一个元素内容之前,会先渲染它的框,顺序是从背景颜色开始,然后是背景图片,接着是边框,最后,浏览器会在框之上渲染框的内容