html – CSS Box / shadow重叠问题z-index
请查看代码段:
http://codepen.io/anon/pen/JItLa
我试图连续显示2行具有不同数量项的块. 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,0 0 23px 1px #000; box-shadow: 0 0 2px rgba(255,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> 怎么可能? 这里还有另一个问题:当我在块之间添加边框时,最后一个块移动到下一行,这是不正常的.请参阅上面给出的示例中的第2行. 解决方法
在悬停时向元素添加
z-index .
此外,还必须定位元素以使
Updated Codepen – 它现在有效. .tile:hover,.tile2:hover { z-index: 1; position: relative; } 为了解决您的第二个问题,元素出现在一个新行上,因为它们的宽度不会相加,因为它因边框而关闭1px. 33.3%33.3%33.3%1px!= 100% 你有几个不同的选择: >使用 如果您选择使用 .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使用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |