我正在尝试在列表中创建一堆卡片,以便卡片可以按位置交换和组织。
但是,虽然排序也不起作用,但现在我面临着下面卡片中的文本显示在最顶层卡片上方的问题:
这是我目前的代码,包括 HTML 和 CSS:
.catCards {
justify-content: space-between;
margin: 5px;
text-align: center;
z-index: 1;
margin-top: 256px;
}
.cwColumnCard {
margin-top: -190px;
}
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
}
.cwCTitle {
padding: 3px;
border-bottom: 1px solid #FFF;
text-align: center;
font-size: 18px;
z-index: 1;
}
.cwImage {
margin: 0 auto;
width: 130px;
height: 130px;
border: 1px solid #ccc;
margin-top: 5px;
z-index: 1;
}
.cwValue {
width: 100%;
text-align: center;
padding: 4px;
padding-bottom: 5px;
padding-top: 5px;
z-index: 1;
}
.cwSystemLabel {
width: 100%;
text-align: center;
padding-bottom: 4px;
padding-top: 4px;
z-index: 1;
}
<div class="catCards">
<ul>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card One</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
<li class="cwCard cwColumnCard">
<div class="cwCTitle">Card Two</div>
<div class="cwImage">Test</div>
<div class="cwValue">100</div>
<div class="cwSystemLabel">Label</div>
</li>
</ul>
</div>
Z-Index 是对文本定位的短暂尝试,但没有任何效果。是什么导致文本以这种方式显示?下面的卡片一旦被覆盖就应该隐藏起来。
最佳答案
要使 z-index
属性正常工作,您需要将 position
属性设置为 static
以外的值。
在这种情况下,将 position: relative;
添加到 .cwCard
将解决您的问题。
.cwCard {
display: block;
width: 160px;
border: #FFF solid 1px;
border-radius: 5px;
background: #3d3d3d;
overflow: hidden;
height: 250px;
box-shadow: 0px 4px 16px #000000cb;
-webkit-box-shadow: 0px 4px 16px #000000cb;
-moz-box-shadow: 0px 4px 16px #000000cb;
-ms-box-shadow: 0px 4px 16px #000000cb;
z-index: 50;
position: relative;
}
关于css - 尝试在列表中堆叠卡片时,下面一张的文本显示在下一张的上方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52472226/