意外 CSS 定位错误

Question

我有以下代码：

<!DOCTYPE html>
<html>
<head>
<title>Kastflix</title>
<style type="text/css">
.moviepane { background-color: #181816; top: 41px; left: 181px; position: fixed; width: 100%; height: 100%; }
.movietile { background-color: #181816; margin-top: 13px; margin-left: 12px; margin-right: 12px; width: 135px; height: 235px; display:inline-block; vertical-align: top }
.movieposter { width: 135px; height: 197px; border:1px solid #000000; border-radius: 3px; transition: all 0.5s; position: absolute; }
.movieposter:hover { border:1px solid #0094ff; }
.linkoverlay { width: 137px; height: 199px; background-color: #000000; opacity: 0; transition: all 0.5s; pointer-events: none; }
.movieposter:hover + .linkoverlay { opacity: 0.6; }
</style>
</head>
<body>
<div class="moviepane">
    <div class="movietile">
        <a href="a">
            <img class="movieposter" src="\movies\Delivery%20Man%20(2013)%20%5B1080p%5D\Delivery%20Man%20(2013)%20%5B1080p%5D.jpg"></img>
            <div class="linkoverlay"></div>
        </a>
        <p class="moviename">Delivery Man</p>
        <p class="movieyear">2013</p>
    </div>
</div>
</body>
</html>

当我将鼠标悬停在电影图块上时，它看起来像这样：

正如我所见，电影海报是绝对定位的，因此它将相对于具有非静态位置类型的最近的父容器。但是在这种情况下，有 none。那么它不应该与文档相关吗？为什么movieposter相对于movietile？

感谢您的帮助！

Answer 1

尽管元素是绝对定位的，但您还没有在该元素上指定任何偏移量，因此无论其包含块如何，它都不会从其静态位置移动（即无论其任何祖先本身是否已定位或是否已定位）否则锚定到初始包含块）。

这是有意为之的行为；请参阅我对 this question 的回答，了解为什么在未指定偏移量时它会以这种方式工作。

但是请注意，绝对定位此元素确实会影响其后续兄弟（覆盖），因为绝对定位会将元素从正常流中移除，因此其后续兄弟不再知道它的位置。

意外 CSS 定位错误

Unexpected CSS Positioning Bug

html

css

css-position