第八讲_css定位

1. css定位介绍

在 css 中，可以通过 position 设置元素的定位模式，常见的定位模式：

1. static（默认值）：按照正常的文本流布局。
2. relative：相对定位。
3. absolute：绝对定位。
4. fixed：固定定位。
5. sticky：粘性定位。

position为非static时，可以通过top、bottom、right、left设置元素的偏移量。

2. 静态定位（static）

静态定位是元素的默认定位方式，按照标准流特性摆放位置，没有边偏移。

3. 相对定位（relative）

• 相对定位的参考点是自己原来的位置。
• 相对定位不会脱离标准流，继续占有原来的位置。元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
• left 和 right 不能同时使用，top 和 bottom 不能同时使用。

<style>.first {height: 100px;width: 100px;background-color: aqua;position: relative;top: 20px;left: 20px;
}
.second {height: 100px;width: 100px;background-color: blueviolet;
}
</style><div class="parent"><div class="first"></div><div class="second"></div>
</div>

4. 绝对定位（absolute）

• 绝对定位的参考点是它的包含块。
  • 对于没有脱离标准流的元素，它的包含块就是父元素。
  • 对于脱离标准流的元素，它的包含块是第一个拥有定位属性的祖先元素。
• 绝对定位会脱离标准流，对后面的兄弟元素、父元素有影响。
• 绝对定位和浮动不能同时设置，如果同时设置，浮动失效。
• left 和 right 不能同时使用，top 和 bottom 不能同时使用。

<style>
.parent {position: relative;
}
.first {height: 100px;width: 100px;background-color: aqua;position: absolute;top: 20px;left: 20px;/* 浮动不生效 */float: right;
}
.second {height: 100px;width: 100px;background-color: blueviolet;
}
</style><div class="parent"><!-- 父元素设置了定位，所以父元素就是它的包含块 --><div class="first"></div><!-- .first 设置了绝对定位，脱离了标准流。.second 就会占了它的位置 -->><div class="second"></div>
</div>

5. 固定定位（fixed）

• 固定定位的参考点是视口。
• 固定定位会脱离标准流，对后面的兄弟元素、父元素有影响。
• left 和 right 不能同时使用，top 和 bottom 不能同时使用。
• 固定定位和浮动不能同时设置，如果同时设置，浮动失效。

<style>
.container {width: 100px;height: 100px;background-color: red;position: fixed;left: 200px;top: 200px;
}</style><div class="container"></div>

ps: 在浏览器打开上述代码，视口就是浏览器，红色的块在距离浏览器顶部200px，左侧200px的位置。

6. 粘性定位（sticky）

• 粘性定位的参考点是离它最近的拥有“滚动机制”的祖先元素。
• 粘性定位不会脱离标准流，它是专门用于窗口滚动时的新定位方式。

<style>
.container {width: 500px;height: 200px;/* 内容超出显示滚动条 */overflow: scroll;
}.fisrt {height: 100px;background-color: red;position: sticky;top: 20px;
}
.second {height: 100px;background-color: darkorchid;
}
.third {height: 100px;background-color: blue;
}
</style><div class="container"><div class="fisrt"></div><div class="second"></div><div class="third"></div>
</div>

ps: 只要设置了定位的元素，其显示层级比普通元素高