CSS Box/shadow overlapping issue z-index
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.
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.
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
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.
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.
You have a few different options:
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 -
If you choose to use
box-sizing , you need appropriate vendors/prexes if you want support across all browsers. I would use something like: