How Would I Have The Image In This Div With Rollover Not Get The Overlay?

was wondering how I would have the white chat bubble escape the overlay. if there is also any way to simplify whats happening here with this code that would be appreciated too, I'm

Solution 1:

The z-index property only applies to positioned elements.

Therefore if you want the chat bubble to appear over the other elements you would have to position it. (i.e., add position: relative), then increase the z-index value in this case.

Updated Example

.innerbox img {
    margin: 2px;
    width: 25px;
    height: 25px;
    z-index: 20;          /* Increased from 1 -> 20 */
    position: relative;   /* Added this.. */
}

The default value of the position property is static, which is why it wasn't working.