定位

1. 定位

定位绝大使用场景

1. 一个元素覆盖在另一个元素之上的
2. 固定在网页某块区域不移动的

定位的组成

1. 定位模式
2. 边偏移

定位模式的分类

静态定位 static

• 标准流

★相对定位 relative - 自恋一哥

• 相对定位的元素是不会脱离标准流的
• 参考的是自身原来的位置

★绝对定位absolute - 拼爹一哥

• 绝对定位的元素是脱离标准流的,不再占有自身原来的位置,设置了绝对定位的元素,会改变元素的显示模式,类似于行内块
• 参考位置:
  • 如果没有父元素或者父元素未设置定位,该元素参考的是浏览器的窗口
  • 如果父元素设置了相对/绝对/固定等定位模式,会参考最近一级的设置有定位模式的父元素

★固定定位fixed - 专一哥

• 固定定位,将元素固定在窗口的某个位置,会脱离标准流,不会占有原来的位置
• 设置了固定定位的元素,不会跟随页面的滚动而滚动
• 永远参考浏览器窗口的,(但是在23d转换的时候transform,会将元素进行区域渲染,设置了固定定位的子元素会参考到父元素)

粘性定位sticky

• 设置粘性定位 需要配合边偏移使用 相对定位和固定定位的结合体

堆叠顺序z-index

1. z-index是设置定位元素的堆叠顺序的,

2. 只能为设置了定位属性的元素设置(标准流和浮动元素使用不生效)

3. 不加单位,可以设置负值

   <style>
    .one {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: red;
        z-index: 9;
    }
    .two {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
   </style>
   <div class="one"></div>
   <div class="two"></div>
   

   ​