CSS Box/shadow overlapping issue z-index

css, css-float, html

Solution

Add a `z-index` to the element on hover.

Additionally, the element also has to be positioned in order for the `z-index` property to work. Therefore add `position:relative` too.

9.9.1 Specifying the stack level: the 'z-index' property

z-index: Applies to: positioned elements

Each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis.

Updated Codepen - it works now.

.tile:hover, .tile2:hover {
    z-index: 1;
    position: relative;
}

To address your second issue, the elements are appearing on a new line because their widths do not add up, as it is `1px` off due to the border.

`33.3%` + `33.3%` + `33.3%` + `1px` != `100%`

You have a few different options:

Use `calc()` to subtract `1px` from the width - `width: calc(33.3% - 1px)`

Change the box model to include the border in the element's width calculation - `box-sizing`

If you choose to use `box-sizing`, you need appropriate vendors/prexes if you want support across all browsers. I would use something like:

.tile2 {
    width: 33.3%;
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Updated Codepen using `box-sizing`.

Problem

Please take a look at the code snippet: http://codepen.io/anon/pen/JItLa I'm trying to show 2 rows of blocks with different amount of items in a row. The hover event should reveal the CSS shadow, but there is a problem: the right border of the shadow is overlapped with the next block. You would say the possible solution here is to use display:inline-block which leaves the gaps between the blocks, but I don't need the gaps. The blocks should stay sticky to each other but the right shadow should overlap the next block onhover. ``` html, body { margin: 0; padding: 0 } .wrapper { width: 100%; margin-top: 20px } .tile, .tile2 { float: left; background: #f2f2f2 } .tile { width: 25% } .tile2 { width: 33.3%; border-left: 1px solid #ddd } .tile:hover, .tile2:hover { -webkit-box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000; -moz-box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000; box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000 } .header { padding: 20px 0px 10px; text-align: center } .clear { clear: both } ``` ``` <div class="wrapper"> <div class="tile"> <div class="header">some text</div> </div> <div class="tile"> <div class="header">some text</div> </div> <div class="tile"> <div class="header">some text</div> </div> <div class="tile"> <div class="header">some text</div> </div> <div class="clear"></div> </div> <div class="wrapper"> <div class="tile2"> <div class="header">some text</div> </div> <div class="tile2"> <div class="header">some text</div> </div> <div class="tile2"> <div class="header">some text</div> </div> <div class="clear"></div> </div> ``` How is that possible? There is another problem here: when I add the border between the blocks the last blocks moves to the next line which is not OK. See the 2nd row in the example given above.

Original source