0
У меня есть следующий код:Неожиданное CSS позиционирование Bug
<!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>
Когда я парить над кино плитке, это выглядит следующим образом:
Как я это вижу, постер фильма позиционирован абсолютный, поэтому он будет относиться к ближайшему родительскому контейнеру с нестатическим типом положения. Но в этом случае их нет. Так не должно быть относительно документа? Почему кинопостер относительно movietile?
Любая помощь приветствуется!
Не могли бы вы сделать из него http://jsfiddle.net/? Как это выглядит раньше? – Dropout
Потому что вы не меняете верхнюю, правую, нижнюю или левую позицию? Я не понимаю, в чем проблема. – j08691
Что вы пытаетесь достичь? – Jeff