【前端从0开始】CSS——10、定位

1 定位属性（position）

1.1 定义

position 属性指定了元素的定位类型。

• static：静态定位【默认值】
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位
• sticky：粘性定位

1.1.1 static 定位

默认HTML元素值，即没有定位，遵循正常的⽂档流对象。不受到 top, bottom, left, right 影响。

.static {
    position: static;
    background-color: red;
}

1.1.2 relative 定位

相对定位元素的定位是相对自身的正常位置。它的原始空间不会改变。

css

.relative {
    position: relative;
}

1.1.3 absolute 定位

绝对定位的元素位置是相对于最近的已定位⽗元素，如果没有，则相对于文档定位。

css

.absolute {
    position: absolute;
    left: 20px;
    top: 20px;
}

1.1.4 fixed 定位

元素的位置相对于浏览器窗⼝是固定的，即使滚动也不移动。

css

.fixed {
    position: fixed;
    left: 20px;
    top: 20px;
}

1.1.5 sticky 定位

• 基于用户滚动来定位
• 未滚动时，类似 position:relative
• 滚动超过时，类似 position:fixed

注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- 前缀。

css

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: red;
    border: 2px solid orange;
}

1.2 堆叠的元素

• 元素可以覆盖⻚⾯上的其他元素
• z-index 属性指定堆叠顺序

注意: 两个定位元素重叠且未指定 z-index，后写入HTML的元素将显示在前。

css

.zindex {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

1.3 position 难点分析

1.3.1 绝对定位 vs 相对定位

• 绝对定位不占据空间，相对定位占据空间
• 绝对定位在堆叠顺序中高于相对定位
• 可通过 z-index 来设置堆叠的顺序

1.3.2 层级问题

• 标准流盒子低于浮动的盒子，浮动盒子又低于定位的盒子
• 层级为0的盒子比标准流和浮动高
• 绝对定位不占位置，相对定位占位置，但堆叠高低与占不占位置无关