Floated Div causing cropping child div/image overflow

Question

I have a series of floated divs with absolutely positioned images inside each one.

If this image is larger than the div width then it will appear cropped.

Although I have set overflow:visible to the floats and their parent div they still crop the image.

Here is a jsfiddle showing an example: http://jsfiddle.net/RkpAe/1/

CSS:

#main, #memorycontainer { height: 100%; width: 100%; overflow: visible; }

.memory { width: 250px; position: absolute; z-index: 98; width: 100px; height: 100px; overflow: visible; background: red;}

.memory { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; z-index: 100; -webkit-border-radius: 50%; cursor: pointer; }

.memorytile { position: relative; z-index: 97; background: yellow; height: 300px; width: 200px; overflow: visible; float: left; margin: 0; padding: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }

HTML:

<div id="main">
<div id="tile1" class="memorytile">
    <div class="memory" style="top: 50px; left: 150px;">
            Icon</div>
    Background Image
    </div>
<div id="tile2" class="memorytile"></div>

Answer 1

Both your memorytile divs are set to the same z-index but because tile2 is after tile1 it is treated as being above it. memory is within tile1 (which is now below tile2 and so you get the effect you are seeing.

Change the z-index of tile1 to be higher than tile2 and it will work. I updated your fiddle: http://jsfiddle.net/RkpAe/2/

There is also a nice explanation of this on http://webdesign.tutsplus.com/

Answer 2

remove

position:relative; 

from

.memorytile{}

this should fix the problem.