CSS框/阴影重叠问题z-index [英] CSS Box/shadow overlapping issue z-index
问题描述
请参阅以下代码段: http://codepen.io/anon/pen/JItLa
我试图在一行中显示不同数量项目的2行块。
悬停事件应该显示CSS阴影,但有一个问题:阴影的右边界与下一个块重叠。
你会说这里可能的解决方案是使用display:inline-block,它留下块之间的间隙,但我不需要间隙。
html,body {margin :0; padding:0} .wrapper {width:100%; margin-top:20px} .tile,.tile2 {float:left;背景:#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>一些文字< / div> < / div> < div class =tile> < div class =header>一些文字< / div> < / div> < div class =tile> < div class =header>一些文字< / div> < / div> < div class =tile> < div class =header>一些文字< / div> < / div> < div class =clear>< / div>< / div>< div class =wrapper> < div class =tile2> < div class =header>一些文字< / div> < / div> < div class =tile2> < div class =header>一些文字< / div> < / div> < div class =tile2> < div class =header>一些文字< / div> < / div> < div class =clear>< / div>< / div>
这是怎么可能的?
这里还有一个问题:当我在块之间添加边框时,最后一个块移动到下一行不行。请参阅上述示例中的第2行。
添加 z-index
此外,元素还必须按 z-index
因此,也要添加 position:relative
。
每个方块都有三维空间位置。除了它们的水平和垂直位置,盒子沿着z轴放置,并且一个在另一个的顶部格式化。当箱子在视觉上重叠时,Z轴位置特别相关。本节讨论如何沿z轴放置框。
更新Codepen - 现在可以正常工作。
.tile:hover,.tile2:hover {
z-index:1;
position:relative;
}
为了解决您的第二个问题,元素出现在一个新行,宽度不会相加,因为边框会减少 1px
。
33.3%
+ +
33.3%
/ code>!= 100%
您有几个不同的选项:
-
更改框模型以在元素宽度计算中包含边框< >
盒尺寸
如果您选择使用 盒尺寸
,如果您需要在所有浏览器上支持,则需要相应的供应商/前端。我会使用像:
.tile2 {
width:33.3%;
border-left:1px solid #ddd;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
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.
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 subtract1px
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
.
这篇关于CSS框/阴影重叠问题z-index的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!