css中的那些坑~

Dylan666d

于 2021-01-25 22:55:40 发布

阅读量133

点赞数

文章标签： css js html5

本文链接：https://blog.csdn.net/Dylan666d/article/details/113147084

版权

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

	// 首先来看下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>