html - Unexpected CSS Positioning Bug -
i have 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: 0.5s; position: absolute; } .movieposter:hover { border:1px solid #0094ff; } .linkoverlay { width: 137px; height: 199px; background-color: #000000; opacity: 0; transition: 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 hover on movie tile, looks :
as see it, movie poster positioned absolute, relative closest parent container non-static position type. in case, there none. shouldn't relative document? why movieposter relative movietile?
appreciated!
you haven't specified offsets on element despite being absolutely positioned, not move static position regardless of containing block (i.e. regardless of whether of ancestors positioned or if anchored initial containing block otherwise).
this intended behavior; see answer this question why works way when offsets not specified.
note absolutely positioning element does affect following sibling (the overlay), because absolute positioning removes element normal flow , following sibling no longer aware of position.
Comments
Post a Comment