第八讲_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>
    >
    <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: 只要设置了定位的元素，其显示层级比普通元素高