Unexpected CSS Positioning Bug

Question

I have the following code :

<!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>

When I hover over a movie tile, It looks like this :
Movie type 1

As I see it, the movie poster is positioned absolute, so it will be relative to the closest parent container with a non-static position type. But In this case, there is none. So shouldn't it be relative to the document? Why is the movieposter relative to the movietile?

Any help is appreciated!

Could you make a http://jsfiddle.net/ out of it? How does it look before? — Dropout, Jun 29 '15 at 14:46
Because you're not changing the top, right, bottom, or left position? I'm not clear on what the problem is. — j08691, Jun 29 '15 at 14:46
@Jeff I have already achieved what I need to. My question is why it works out this way. — Hele, Jun 29 '15 at 14:48
To elaborate on what @j08691 said, because .movieposter is a child of .movietile it will be positioned relative to its parent unless you change one of the offset properties. This behaviour can be confusing but also useful sometimes. — bitwiser, Jun 29 '15 at 14:48

score 1 · Accepted Answer · edited May 23 '17 at 12:14

You haven't specified any offsets on the element despite it being absolutely positioned, so it will not move from its static position regardless of its containing block (i.e. regardless of whether any of its ancestors are themselves positioned or if it is anchored to the initial containing block otherwise).

This is intended behavior; see my answer to this question for why exactly it works this way when the offsets are not specified.

Note however that absolutely positioning this element does affect its following sibling (the overlay), because absolute positioning removes the element from normal flow and so its following sibling is no longer aware of its position.

So basically, In my example, all `positioning: absolute;` does is make the div invisible to the flow? — Hele, Jun 29 '15 at 14:54

Unexpected CSS Positioning Bug

1 Answers1