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>

当我将鼠标悬停在电影磁贴上时，它看起来像这样：
Movie type 1

正如我所看到的，电影海报定位于绝对位置，因此它将相对于具有非静态位置类型的最近父容器。但在这种情况下，没有。那么它不应该与文件相关吗？为什么电影明星相对于电影？左边任何帮助表示赞赏！

Answer 1

你没有在元素上指定任何偏移，尽管它是绝对定位的，所以它不会从静态位置移动而不管其包含的块（即无论它的任何祖先是否自己定位或是否锚定到初始包含块否则）。

这是预期的行为;请参阅我对this question的回答，了解为什么在没有指定偏移的情况下，它的确如此。

但请注意，绝对定位此元素会影响其后续兄弟（叠加），因为绝对定位会将元素从正常流中移除，因此其后续兄弟不再知道其位置。< / p>

意外的CSS定位错误

1 个答案: