卡片上的 CSS 定位和 z-index答案

【问题标题】：CSS positioning and z-index on card卡片上的 CSS 定位和 z-index
【发布时间】：2017-08-15 06:26:27
【问题描述】：

我正在尝试对这张卡片设计进行编码：

但是，我需要一些关于定位和 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>

但是，文本没有显示。我错过了什么？

【问题讨论】：

标签： html css css-position

【解决方案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 使其具有将其置于顶部的位置位于它之前的absolutely 定位伪元素（或.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>

【讨论】：

【解决方案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>

【讨论】：