CSS定位的z-index卡

Question

我試圖代碼此卡的設計：

不過，我需要一些幫助定位和z-index的。這是多遠我來：

.card { 
 
    width: 450px; 
 
    height: 400px; 
 
    background: lightblue; 
 
} 
 
    
 
.card-hover-state { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: linear-gradient(-180deg, #000000 0%, rgba(216,216,216,0.00) 100%); 
 
    opacity: 0.6; 
 
} 
 
    
 
.card-hover-state-title { 
 
    font-size: 15px; 
 
    color: #FFFFFF; 
 
    max-width: 60%; 
 
} 
 
    
 
.card-hover-state-button { 
 
    font-size: 11px; 
 
    color: #FFFFFF; 
 
}

<div class="card"> 
 
    <div class="card-hover-state"></div> 
 
    <div class="information-container"> 
 
    <div class="card-hover-state-title">Brace yourself - A fancy Lorem Ipsum Title is comming</div> 
 
    <div class="card-hover-state-button">READ MORE</div> 
 
    </div> 
 
</div>

但是，文本沒有顯示。我錯過了什麼？

Answer 1

在.card上使用position: relative，那麼您實際上並不需要.card-hover-state - 您可以改爲使用僞元素。無論您使用哪種方式，都需要添加position: absolute; top: 0; left: 0;以將其置於.card背景之上。

然後我會做.information-center一個flex家長和使用justify-content: space-between其子女分離，align-items: center它們垂直居中，並添加position: relative所以它有把它放在absolute LY定位僞元素的頂部位置（或.card-hover-state）。

.card { 
 
    width: 450px; 
 
    height: 400px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.card::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: linear-gradient(
 
    -180deg, 
 
    #000000 0%, 
 
    rgba(216, 216, 216, 0.00) 100% 
 
); 
 
    opacity: 0.6; 
 
} 
 

 
.information-container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    position: relative; 
 
    color: #fff; 
 
} 
 

 
.card-hover-state-title { 
 
    font-size: 15px; 
 
    max-width: 60%; 
 
} 
 

 
.card-hover-state-button { 
 
    font-size: 11px; 
 
}

<div class="card"> 
 
    <div class="information-container"> 
 
    <div class="card-hover-state-title">Brace yourself - A fancy Lorem Ipsum Title is comming</div> 
 
    <div class="card-hover-state-button">READ MORE</div> 
 
    </div> 
 
</div>

Answer 2

您可以通過以下方式得到它。

我只是說display:table您.information-container和分配width:100%充分父divwidth，在那之後我分配.card-hover-state-title和.card-hover-state-button 到position:relative，使他們不使用父div的opacity:0.6也加入display:table-cell和width得到直列都。

我加的下列類的CSS屬性：

.information-container { 
    display: table; 
    width: 100%; 
    padding: 20px; 
    box-sizing: border-box; 
} 

.card-hover-state-title { 
    font-size: 15px; 
    color: #FFFFFF; 
    width: 50%; 
    position: relative; 
    display: table-cell; 
} 

.card-hover-state-button { 
    font-size: 11px; 
    color: #FFFFFF; 
    position: relative; 
    display: table-cell; 
    text-align: right; 
    vertical-align:middle; 
} 

.card { 
 
    width: 450px; 
 
    height: 400px; 
 
    background: lightblue; 
 
    position: relative; 
 
} 
 

 
.card-hover-state { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: linear-gradient(-180deg, #000000 0%, rgba(216, 216, 216, 0.00) 100%); 
 
    opacity: 0.6; 
 
} 
 

 
.information-container { 
 
    display: table; 
 
    width: 100%; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
.card-hover-state-title { 
 
    font-size: 15px; 
 
    color: #FFFFFF; 
 
    width: 50%; 
 
    position: relative; 
 
    display: table-cell; 
 
} 
 

 
.card-hover-state-button { 
 
    font-size: 11px; 
 
    color: #FFFFFF; 
 
    position: relative; 
 
    display: table-cell; 
 
    text-align: right; 
 
    vertical-align:middle; 
 
}

<div class="card"> 
 
    <div class="card-hover-state"></div> 
 
    <div class="information-container"> 
 
    <div class="card-hover-state-title">Brace yourself - A fancy Lorem Ipsum Title is comming</div> 
 
    <div class="card-hover-state-button">READ MORE</div> 
 
    </div> 
 
</div>