CSS的四种定位方式
CSS的四种定位方式1.静态定位:设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位。静态定位的盒子处于网页的最底层,并且top、left、bottom、right属性都不起作用。2.相对定位:设置方式为position: relative;相对定位的盒子脱离了标准流,盒子的层级高于标准流和浮动...
CSS的四种定位方式
1.静态定位:
设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位。静态定位的盒子处于网页的最底层,并且top、left、bottom、right属性都不起作用。
2.相对定位:
设置方式为position: relative;相对定位的盒子没有脱离标准流,在页面中占据位置,盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后,相对定位的盒子是相对自己在标准流中的位置进行偏移,但是盒子在页面中占据的位置是不会改变的。
两个相对定位的盒子,默认的情况下第二个盒子层级比第一个盒子层级高,即第二个盒子可以覆盖第一个盒子,如果想让第一个盒子覆盖第二个盒子,可以通过设置z-index属性实现。
第一个盒子设置z-index前:
第一个盒子设置z-index: 1;后:
3.绝对定位:
设置方式为position: absolute;绝对定位的盒子脱离了标准流,在页面中不占位置,盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后,绝对定位的盒子是相对设置了定位属性(静态定位不算)的最近的父级盒子的位置进行偏移,如果没有设置了定位的父级盒子,则是相对于body标签进行偏移。
绝对定位的盒子可以通过设置z-index属性改变层级。
3.固定定位:
设置方式为position: fixed;固定定位的盒子脱离了标准流,在页面中不占位置,盒子的层级高于标准流和浮动的盒子,top、left、bottom、right属性都会起作用。
设置了top、left、bottom、right属性后,固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动,固定定位的盒子永远显示在浏览器窗口,不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。
固定定位的盒子可以通过设置z-index属性改变层级。
固定定位的盒子默认的宽高由其内容决定。
结果:
更多推荐
所有评论(0)