前端一些棘手的问题

最新推荐文章于 2025-10-07 19:29:23 发布

原创最新推荐文章于 2025-10-07 19:29:23 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #问题 #定位 #css #fixed

在开发过程中会遇到许许多多的问题，一些目前遇到无法解决的例子将被记录在这篇文章里。

问题1

在掘金上看到一个关于CSS定位很有趣求助问题，目前没有找到解决方法。

问题描述：
给一个元素设置position:fixed，如果给他的祖先元素加上transform属性，将会导致fixed失效，变成absolute的效果。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
.parent {
    transform: translate(0, 0);
}

.element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: red;
    z-index: 10100;
}
</style>
</head>

<body>
    <div class="parent">
        <div class="element"></div>
    </div>
    <p>00000000000000000001</p>
    <p>00000000000000000002</p>
    <p>00000000000000000003</p>
    <p>00000000000000000004</p>
    <p>00000000000000000005</p>
    <p>00000000000000000006</p>
    <p>00000000000000000007</p>
    <p>00000000000000000008</p>
    <p>00000000000000000009</p>
    <p>00000000000000000010</p>
    <p>00000000000000000011</p>
    <p>00000000000000000012</p>
    <p>00000000000000000013</p>
    <p>00000000000000000014</p>
    <p>00000000000000000015</p>
    <p>00000000000000000016</p>
    <p>00000000000000000017</p>
    <p>00000000000000000018</p>
    <p>00000000000000000019</p>
    <p>00000000000000000020</p>
    <p>00000000000000000021</p>
    <p>00000000000000000022</p>
    <p>00000000000000000023</p>
    <p>00000000000000000024</p>
    <p>00000000000000000025</p>
    <p>00000000000000000026</p>
    <p>00000000000000000027</p>
    <p>00000000000000000028</p>
    <p>00000000000000000029</p>
    <p>00000000000000000030</p>
</body>

</html>