Position | 不是第一

DANGER

HTML子绝父相。子绝父相 —— 子级是绝对定位，父级要用相对定位。
子绝父相是使用绝对定位的口诀，要牢牢记住！
relative-->absolute

css Position

四大元素：Content、Padding、Border、Margin

Margin & Padding 设定值格式
Margin & Padding，什么时候用哪个？
Margin & Padding 用在 Inline 元素的注意事项
Margin auto 置中 block 元素
Margin Collapse 边距重叠
Box-Sizing

Position 是 CSS 一个很重要的属性，设定值包括 static、absolute、relative、fixed 和 sticky 五个。

absolute 绝对定位，即时在一个元素中也不会受到其他影响，，在发生两个absolute嵌套时，是根据最外层的absolute元素来定位的

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

absolute

absolute 元素所在位置有卷轴 (滚动轴), 会跟随卷轴滚动
当两个absolute 元素发生嵌套时,结果是里面的元素是根据外层的absolute 元素去定位的

<style>
    .base {
        width: 100%;
        height: 520px;
        background-color: rgb(118, 118, 179);
    }

    .abs {
        border: 5px solid #43339c;

        width: 300px;
        height: 300px;
        position: absolute;
        bottom: 0;
        right: 120px;
    }
</style>

<body>
    <div class="base"> </div>
    <div class="base"> </div>
    <div class="base"> </div>
    <div class="abs">
        <!-- 发生嵌套 -->
        <div class="abs"></div>
        absolute
    </div>
</body>

relative

relative 会跟随html排版而移动,即它可以通过html排版调整之余,还可以通过 top bottom left right 去定位, 注意：定位是根据自身元素所在位置来定位的
relative 最重要的一个特性是它里面的 absolute 子元素是根据relative位置去定位的


<style>
    .base {
        width: 100%;
        height: 520px;
        background-color: rgb(118, 118, 179);
    }

    .relative {
        border: 5px solid #43339c;
        width: 300px;
        height: 300px;
        position: relative;
        top: 200px;

    }

    .abs {
        border: 5px solid #865113;
        width: 150px;
        height: 150px;
        position: absolute;
        left: 50px;
        top: 30px;
    }
</style>

<body>
    <div class="base"> </div>
    <div class="base"> </div>
    <div class="base"> </div>
    <div class="relative">
        <!-- 嵌套 absolute -->
        <div class="abs">absolute DOM</div>
    </div>
</body>

fixed

fixed 会定位到屏幕的固定位置, 及时页面可以卷动, 依然固定在页面固定位置,和absolute 相反
fixed 即使嵌套到任何position 元素里, 永远是根据body 当前窗口来定位的


<style>
    .base {
        width: 100%;
        height: 520px;
        background-color: rgb(118, 118, 179);
    }

    .relative {
        border: 5px solid #43339c;
        width: 300px;
        height: 300px;

    }
    
    .fx {
        background-color: #000;
        border: 5px solid #13862c;

        position: fixed;
        width: 150px;
        height: 150px;
        bottom: 20px;
    }
</style>

<body>
    <div class="base"> </div>

    <div class="base">
        <!-- 元素不会受到任何影响 -->
        <div class="fx"> </div>
    </div>
    <div class="base"> </div>

</body>

sticky

sticky 设定后,当页面滚动达到预定值后会触发
一般用在网站的导览页等


<style>
    .base {
        width: 100%;
        height: 520px;
        background-color: rgb(118, 118, 179);
    }
    
    .stic {
        background-color: #000;
        border: 5px solid #13862c;
        position: sticky;
        width: 150px;
        height: 150px;

        bottom: 20px;
        top: 50px;
    }
</style>

<body>
    <div class="base"> </div>
    <div class="base"> </div>
    <div class="base"> </div>
    <!-- 可同时设定 top  bottom -->
    <div class="stic"></div>

    <div class="base"> </div>
    <div class="base"> </div>

</body>

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

# css Position

# absolute

# relative

# fixed

# sticky

# z-index