z-index层级以及定位的3种方式

442 阅读1分钟

相对定位::

<!-- position默认值是static  标准流布局展示-->
<!-- 相对定位 -->
<!-- position: relative; -->
<!-- relative相对于自身原位置进行位移 ,向左移动100px,向右移动100px  -->

绝对定位::

<!-- position: absolute; -->
<!-- 绝对定位  -->
<!-- 脱离标准文档流 -->
<!-- 设置绝对定位之后,前面的会被后面的盖住 -->
<!-- 内部是绝对定位,父盒子也是绝对定位,就会以父盒子为基础进行位移 -->
<!-- div1的父盒子不是绝对定位,那么他就会以body为基准进行定位 -->
<!-- 如果child的父盒子不是绝对定位,那么child会以Body为基准进行定位 -->

固定定位::

<!-- 固定定位   固定位置,窗口滚动也不会移动 -->
<!--  position: fixed; -->
<!-- 与文档流无关,不占空间 -->

层级关系:

<!-- 要想提高层级,就要用z-index 默认值为0 -->
<!-- z-index 可以设置各元素层级关系 -->
<!-- relative absolute fixed 都可以使用z-index提高层级 -->