css中的那些坑~

原创于 2021-01-25 22:55:40 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #html5

本文探讨了一个关于CSS布局的问题：当包含fixed定位元素的父级元素应用了transform属性时，fixed定位为什么会失效。通过深入分析，揭示了transform属性如何改变了定位的基准点。

今天在写页面的时候发现个匪夷所思的问题
直接看代码吧!

	// 首先来看下css代码
	<body>
    <style>
        .box {
            height: 300px;
            background-color: #ddd;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background-color: green;
        }
    </style>

    <div style="margin-top:100px"></div>
    <div class="box">
        我是容器box
        <div class="fixed">
            我是绝对定位
        </div>
    </div>
</body>

这样布局应该很直观；
在这里插入图片描述
但是在代码里面加一行属性

// 再来瞅一瞅css的代码
<body>
    <style>
        .box {
            height: 300px;
            background-color: #ddd;
            transform: translate(0, 0);
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background-color: green;
        }
    </style>

    <div style="margin-top:100px"></div>
    <div class="box">
        我是容器box
        <div class="fixed">
            我是绝对定位
        </div>
    </div>
</body>