CSS：定位（position）的可视化理解 - 一个html文件让你快速理解定位

本文链接：https://blog.csdn.net/weixin_47293087/article/details/124664123

✂️ First：拆分解析

一、正常文档流、static和relative。

正常文档流、static和relative。——页面效果

二、正常文档流( static, relative… )的嵌套与层级。

正常文档流的嵌套与层级。——页面效果

三、absolute。

absolute——页面效果

…其他的拆分有空再写😪

🏃‍♂️ Final：完整网页代码

说明：

实验性地试验各种定位及其组合，所以可能内容较多，也比较绕。
将代码运行结合网页最大化效果阅读。
序号是按照html从上到下的顺序、已经尽量做到使阅读友好了TT。
我有理解错的欢迎指导修改。
不定期修改补充。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置了content="width=device-width", 那么html宽度随视窗宽度改变, 但高度不会。 -->
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
    <title>Position预览(建议PC浏览器最大化窗口打开)</title>
    <style>
        /* 内嵌样式不是重点 */
        html {
            background-color: white;
            border: rgb(138, 138, 138) dashed 4px;
            border-radius: 12px;
        }

        body {
            padding: 20px;
            padding-top: 0px;
            margin: 20px;
            border: 4px dashed rgb(138, 138, 138);
            background-color: rgb(234, 234, 234);
            border-radius: 12px;
            font-family: 'Microsoft YaHei';
        }

        div,p,span {
            border-radius: 12px;
            padding: 10px;
        }

        h2 {
            position: relative;
            z-index: 99;
        }

        p {
            background-color: slategray;
            color: white;
        }

        span {
            background-color: white;
            color: slategray;
        }

        .static { position: static; }

        .relative { position: relative; }

        .absolute { position: absolute; }

        .fixed { position: fixed; }

        .sticky { position: sticky; }

        .static1,.relative1,.absolute1,.fixed1,.sticky1 {
            width: 400px;
            background-color: #FFCCCC;
        }

        .static2,.relative2,.absolute2,.fixed2,.sticky2 {
            width: 300px;
            background-color: #CCFFFF;
        }

        .static3,.relative3,.absolute3,.fixed3,.sticky3 {
            width: 200px;
            background-color: #FFFFCC;
        }

        .static4,.relative4,.absolute4,.fixed4,.sticky4 {
            width: 120px;
            background-color: #99CCCC;
        }
    </style>
</head>

<body>
    <h2>一、正常文档流、static和relative<span style="font-size: 14px;background-color: transparent;">( 建议PC浏览器最大化窗口打开。)</h2>
    <p style="width:400px">1-1.我是p我在static上面。我处在正常文档流里。</p>
    <div class="static static1">
        1-2.我是static。我的意思就是没有定位、取消定位、回归正常文档流。
        没有定位意味对top, right, bottom, left ( 统称偏移 ) 和 z-index ( 层级 ) 属性无效。
        因为 z-index 无效, 所以正常文档流里没有重叠。( 除了嵌套 )
    </div>
    <div class="relative relative1" style="left: 10px;bottom:-10px;">
        1-3.我是relative。虽然我设置了偏移, 但我的内容 ( content+border ) 还占着正常文档流。
    </div>

    <h2>二、正常文档流<span style="font-size: 14px;background-color: transparent;">( static, relative... )</span>的嵌套与层级</h2>
    <div class="static static1" style="height: 100px;">
        2-1.我是最外层static1。文档流内元素子类覆盖父类。
        <p style="width: 1400px;">
            2-2.我是p, 我没有设置定位, 属于正常文档流。
            <span class="relative relative2" style="left: 0px;bottom:-10px;z-index: 1;">
                2-3.我是最内层relative2。
                不设置层级的话, 我会被relative3盖住。
            </span>
            <span class="relative relative3" style="left: -40px;bottom:-40px;z-index: 0;">
                2-4.我是relative3。
            </span>
            我被 relative2 和 relative3 挡住了并撑开部分内容了。
        </p>
    </div>

    <h2>三、absolute <span style="font-size: 14px;background-color: transparent;">( 将标题三以后的标题四及以上等内容先暂时注释掉代码,
            才能查看此项的正常效果。)</span></h2>
    <div class="static static1">
        3-1.我是static1。
        <div class="absolute absolute3" style="height: auto;">
            3-2.我是absolute3, 我在static1里。
            没有设置偏移的话, 遵从最近的父类的文档流。
            换成其他定位, 效果也是一样。
            能靠static1的padding和内容撑开来改变位置。
            absolute 是相对于 最近的 非static 父类 定位元素 来进行 定位偏移 的。
            一直往上找到 最大的标签 body/html(html标签有激活的话) 都没有的话, 则相对于 body/html。
        </div>
        <div class="absolute absolute4" style="left: 0px;width: 350px;">
            3-4.我是 absolute4, 我设置了向右偏移0px ( 相对于 滚动条在顶部时的视窗大小的 left = 0px; ), 不设置top。所以我的水平方向脱离文档流了, 但垂直方向还在文档流里。
        </div>
        <div class="absolute absolute4" style="top: 0px;width: 350px;">
            3-5.我是 absolute4, 我设置了top 0px ( 相对于 滚动条在顶部时的视窗大小 ), 不设置 left。
        </div>
        <div class="absolute absolute4" style="bottom: 0px;width: 550px;">
            3-6.我是 absolute4, 我设置了bottom 0px ( 相对于 滚动条在顶部时的视窗大小 ), 不设置 left。因为在正常文档流末尾的一个元素内设置了非正常文档流子类元素的话,
            该子类内容不会撑大html而是直接溢出 , 而滚动条是计算所有内容的, 导致内容高度大于html高度 。你滚动了页面 , 我依然是相对于滚动条在顶部时的视窗大小的位置不变。你改变视窗 , 我的位置也会改变。
        </div>
        <div class="absolute absolute4" style="top: 0px;right: 0px;width: 350px;">
            3-7.我是 absolute4, 我设置了top 0px ( 相对于 滚动条在顶部时的视窗大小 ), right 0px ( 相对于 滚动条在顶部时的视窗大小 )。
        </div>
    </div>

    <h2 style="margin-top: 300px;">四、fiexed</h2>
    <div class="fixed fixed1">4-1.我是fixed1, 不定义类似top/left/bottom和宽高等, 我不会出现。</div>
    <div class="fixed fixed2" style="top: 50%;left: 50%;">
        4-2.我是fixed2。跟absolute一样定义类似top/left/bottom等, 我就自由了。
        但我更自由, 因为我永远相对于视窗的位置, 不会随滚动条改变视窗位置。
        不定义类似top/left/bottom等这些我就啥也不是, 你看4-1.fixed1就知道了, 根本找不到他。
    </div>

    <h2>五、sticky</h2>
    <div class="sticky sticky1" style="top: 0px;">5-1.我是sticky1像relative一样在正常文档流里;我top为0,设置top是为调整进入类似fixed状态时的位置。大部分浏览器不兼容sticky, 需要js来写。
    </div>
    <div class="sticky sticky2" style="top: 50px;">5-2.我是sticky2,设置了top为50px。</div>
    <div style="height: 200px;background-color: white;text-align: center;">我是用来撑高度, 给大家展现sticky的效果的</div>

    <h2>六、relative和absolute</h2>
    <div class="relative relative1">
        6-1.我是relative1,我离left300px。尽管设置了left我也没有被移出正常文档流。
        我离top0px,却在这个位置, 这就是与absolute的不同, 我还在正常文档流里。
        （会被它的内容挤下去。）
        但absolute也就在我这里被我的内容挤下去。
        <div class="absolute absolute4">
            6-2.我是relative里的absolute,我的left50px是相对于relative的。absolute会根据relative去定位。无论我向下向右怎么飞, relative始终还是我爸爸, 脱离不了他。
        </div>
    </div>
    <div class="static static3">6-3.我是static3我是static3我是static3
        <div class="absolute absolute4">6-4.我是static里的absolute, 设置了left和top的我不受它束缚, 改成相对于body。就好像断绝了父子关系,
            但还是脱离不了祖先。除了父类是relative</div>
    </div>



</body>

</html>