CSS的六种定位模型

时间 2019-12-08

标签 css 定位模型栏目 CSS 繁體版

原文原文链接

定位模型 2017年6月8日 fanbright

css支持6种定位模型css

静态
绝对
固定
相对
浮动
相对浮动

设定位置

position:static;能够取消元素的定位设置,使之恢复为原先在常规流中的显示方式.static是默认值.html
position:relative;可使元素相对于常规流的位置偏移必定距离.浏览器
position:absolute;可使元素相对于常规流的位置或最近定位祖先元素的位置偏移必定的距离.布局
position:fixed;可使元素相对于窗口偏移必定的距离.spa
z-index能够设置元素的堆叠顺序,数值越大,元素越靠上.code

`最近定位祖先元素`

若是设定位置的元素没有定位祖先元素,那么<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素.
最近定位元素必须是有效的祖先元素(relative|absolute|fixed),css不支持相对于文档中任意元素进行定位的方法.
position:relative;是一个很是好的建立定位祖先元素的方法,由于它不会离开常规流.使用这种方法,可以建立出既保持常规流又实现绝对定位的布局.

原子显示
设定了位置的元素是原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.经过使用相对定位,绝对定位和固定定位模式,就能够将元素设置为原子显示,设置为overflow:scroll|auto的块级元素也是原子显示的

而没设定位置的静态块级,当发生重叠时,他们的行内内容不会重叠,可是他们的边框和背景会发生重叠,但文字不会.htm

`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的话,不要加单位,
浏览器在渲染一个元素内容以前,会先渲染它的框,顺序是从背景颜色开始,而后是背景图片,接着是边框,最后,浏览器会在框之上渲染框的内容

CSS的六种定位模型

定位模型 2017年6月8日 fanbright

设定位置

最近定位祖先元素

position:relative;是一个很是好的建立定位祖先元素的方法,由于它不会离开常规流.使用这种方法,可以建立出既保持常规流又实现绝对定位的布局.

原子显示

z-index

一 静态定位模型

二 绝对定位模型

绝对定位居中,通常元素

绝对定位居中,静态行内元素

三 固定定位模型

四 相对定位

五 浮动定位与复位

六 相对浮动定位

零散