css支持6种定位模型
position:static;可以取消元素的定位设置,使之恢复为原先在常规流中的显示方式.static是默认值.
position:relative;可以使元素相对于常规流的位置偏移一定距离.
position:absolute;可以使元素相对于常规流的位置或最近定位祖先元素的位置偏移一定的距离.
position:fixed;可以使元素相对于窗口偏移一定的距离.
z-index可以设置元素的堆叠顺序,数值越大,元素越靠上.
最近定位祖先元素<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素.原子显示设定了位置的元素是原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.通过使用相对定位,绝对定位和固定定位模式,就可以将元素设置为原子显示,设置为overflow:scroll|auto的块级元素也是原子显示的
而没设定位置的静态块级,当发生重叠时,他们的行内内容不会重叠,但是他们的边框和背景会发生重叠,但文字不会.
z-index适用于所有元素,默认auto
position:static;默认是static;
尺寸,内边距,边框,和外边距决定了下一个元素的开始位置.合并在一起,最终的外边距是两个相邻元素外边距的较大值
已设定尺寸的静态块级元素居中显示.position:absolute;
百分数是相对于最近定位祖先元素的尺寸而言,而非父元素的尺寸.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才会生效position:relative;
使用float:left;和float:right;可以使元素离开常规流.
行内,绝对定位或固定定位的元素使用float可以使一些元素成为浮动元素,通过relative可以浮动元素设置为相对定位,相对浮动元素仍然位于浮动元素所在的常规流中,可以使用left和top设置它在流中的偏移位置.
在css中,如果参数值是0的话,不要加单位,
浏览器在渲染一个元素内容之前,会先渲染它的框,顺序是从背景颜色开始,然后是背景图片,接着是边框,最后,浏览器会在框之上渲染框的内容
以上就是CSS的六种定位模型的详细内容，更多关于CSS的六种定位模型的资料请关注九品源码其它相关文章！