Z-index

Question

Pay attention to the code snippet: http://codepen.io/anon/pen/JItLa

I am trying to show 2 rows of blocks with a different number of elements per row. The hover event should show the CSS shadow, but there is a problem: the right border of the shadow overlaps with the next block. You could say that a possible solution here is to use display: an inline block that leaves spaces between the blocks, but I don't need spaces. Blocks should remain sticky to each other, but the right shadow should overlap the next onhover block.

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 this possible?

There is another problem here: when I add the border between the blocks, the last blocks are moved to the next line, which is not in order. See the second line in the example above.

Answer 1

Add a z-index element.

In addition, the element must also be positioned in order to work with z-index . So add position:relative too.

9.9.1 Stack Level Detection: 'z-index' Property

z-index: used for: positioned elements

Each box has a position in three dimensions. In addition to their horizontal and vertical positions, the boxes lie along the z axis and are formatted one on top of the other. Z-axis positions are especially important when drawers are stacked visually. This section discusses how cells can be located along the z axis.

Updated Codepen - Now it works.

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

To solve the second problem, the elements appear on a new line, because their width does not add up, since it is 1px turned off from abroad.

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

You have several different options:

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

• Change window model to include border in element width calculation - box-sizing

If you decide to use box-sizing , you need the appropriate providers / prexes if you want to get 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 .

Answer 2

Add the following CSS if you don't need a gap between the divs.

 .wrapper { text-align: center; font-size: 0px; } .tile, .tile2 { display: inline-block; } .tile:hover, .tile2:hover { z-index: 1; position: relative; } .header { font-size: 12px; } `