css Learning5_什么是sticky learning-CSDN博客

本文链接：https://blog.csdn.net/qq_44451988/article/details/109628423

定位与z-index

定位
z-index和堆叠上下文
- 堆叠上下文
- z-index

定位

CSS Position(定位)
position 属性指定了元素的定位类型。

position 属性的五个值：

static 静态定位 - HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
relative 相对定位 - 相对定位元素的定位是相对其正常位置。
absolute 绝对定位 - 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html
fixed 固定定位 - 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
sticky sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

相对定位

相对定位元素的定位是相对其自身原来的位置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>

<body>

    <div></div>

</body>

</html>

在这里插入图片描述

绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html
absolute 定位使元素脱离文档流，因此不占据文档流空间。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            bottom: 100px;
            left: 100px;
        }
    </style>
</head>

<body>

    <div></div>

</body>

</html>

在这里插入图片描述

固定定位

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: fixed;
            top: 100px;
            right: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

在这里插入图片描述

z-index和堆叠上下文

堆叠上下文

它是一块区域，这个区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。
创建堆叠上下文的元素

html元素（根元素）
设置了z-index（非auto值）数值的定位元素

同一个堆叠上下文中元素在z轴上排列。从里到外的排列顺寻规则：

形成堆叠上下文环境的元素的背景与边框
拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
任何 z-index 是auto的定位子元素，以及拥有 z-index:0 的子堆叠上下文元素
拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

每个堆叠上下文，独立于其他堆叠上下文，他们之间不能相互穿插

在这里插入图片描述

z-index

z-index 只适用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto，如果一个定位元素没有设置 z-index，那么默认为auto；

元素的 z-index 值只在同一个层叠上下文中有意义。
如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background-color: lightskyblue;
        }
        
        .sc {
            width: 300px;
            height: 300px;
            background-color: palegreen;
            position: relative;
            z-index: -1;
        }
        
        .scc {
            width: 300px;
            height: 300px;
            background-color: peachpuff;
            margin-top: -100px;
            margin-left: 200px;
            position: relative;
        }
        
        .block {
            width: 150px;
            height: 150px;
            background-color: rgb(228, 41, 72);
            margin-left: 177px;
            margin-top: -50px;
        }
        
        .float {
            width: 150px;
            height: 150px;
            float: left;
            background-color: greenyellow;
            margin-left: 187px;
            margin-top: -370px;
        }
        
        .b {
            width: 150px;
            height: 150px;
            background-color: rgb(34, 170, 194);
            position: absolute;
            left: 100px;
            top: 50px;
            z-index: 1;
        }
        /* 
        1.同一个堆叠上下文中元素在z轴上排列。从里到外的排列顺寻规则：
        2.创建堆叠上下文的元素的背景和边框
        3.堆叠级别为负值的堆叠上下文
        4.常规流非定位块盒
        5.非定位的浮动盒子
        6.常规流非定位行盒
        7.任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
        8.堆叠级别为正值的堆叠上下文
          */
    </style>
</head>

<body>
    <div class="sc">z-index为负值</div>
    <div class="block">常规流非定位块盒</div>
    <p>常规流非定位行盒常规流非定位行盒常规流非定位行盒常规流非定位行盒常规流非定位行盒常规流非定位行盒常规流非定位行盒常规流非定位行盒
    </p>
    <div class="scc">任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
        <div class="b">z-index正值</div>
    </div>
    <div class="float">非定位的浮动盒子</div>
</body>

</html>