卡上的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

在position: relative上使用.card，然后您实际上不需要.card-hover-state - 您可以使用伪元素。无论您使用哪种方式，都需要添加position: absolute; top: 0; left: 0;以将其定位在.card背景上。

然后我会.information-center成为flex个父级并使用justify-content: space-between分隔其子级，并align-items: center将它们垂直居中，然后添加position: relative它将有一个位置，使其位于absolute之前定位的伪元素（或.card-hover-state）之上。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下方法获得它。

我刚刚将display:table添加到您的.information-container并分配了width:100%以获取完整的父div width，之后我分配了.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>