Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。
Relative,CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。
fixed与absolute的区别,都是有层级通过 top,left..实现定位,不同点,fixed固定不变,不随滚动条滚动
1.会改变行内元素的呈现模式,使display之变更为block。
2.会让元素脱离文档流,不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于:absolute的”根元素“是可以被设置的,而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页,其元素与浏览器窗口之间的距离是恒定不变的。
4.top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移,那么margin /padding属性会让该文档空间产生偏移
5.absolute绝对定位,使用absolut定位的元素脱离文档流后,就只能根据祖先类元素(父类以上)进行定位,而这个祖先类还必须是以position非static方式定位的
6.默认是static定位
absolute一般和父级relative配合使用,实现比如列表的布局
1. position: relative;相对定位
1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性)
2> 不会使元素脱离文档流(元素原本位置会被保留,即改变位置也不会占用新位置)
3> 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移)
4>提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面,z-index只能在position属性值为relative或absolute或fixed的元素上有效。) (两个都为定位元素,后面的会覆盖前面的定位)
2. position: absolute;绝对定位
1> 使元素完全脱离文档流(在文档流中不再占位)
2> 使行间元素在设置宽高的时候支持宽高(改变内联元素的特性)
3> 使区块元素在未设置宽度时由内容撑开宽度(改变区块元素的特性)
4> 相对于最近一个有定位的父元素偏移(若其父元素没有定位则逐层上找,直到document——页面文档对象)
5> 相对定位一般配合绝对定位使用(将父元素设置相对定位,使其相对于父元素偏移)
6> 提升层级(同相对定位)
3. position: fixed;固定定位
fixed生成固定定位的元素,相对于浏览器窗口进行定位。
4. position:static:默认值
默认布局。元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
5. position: sticky 粘性定位
粘性定位,该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
6. position: inherit
规定应该从父元素继承 position 属性的值。
7. posiyion: initial
设置该属性为默认值,详情查看CSS initial 关键字
initial 关键字用于设置 CSS 属性为它的默认值。
initial 关键字可用于任何 HTML 元素上的任何 CSS 属性