html - 位置相对/绝对

Question

我想要做的是在每个框的蓝色标题之后获取红色文本。

看来我必须添加另一个 div？我已经添加并修改了 .card-indus img 的位置，但结果永远不是我想要的。

你知道为什么即使我将 position:relative; 应用于 .industries .container-industries .card-indus img 也不起作用吗？你有什么建议吗？

.industries .container-industries .card-indus {
  position: relative;
  border: red solid 1px;
  color: white;
  max-height: 300px;
  overflow: hidden;
  height: 100%;
}

.industries .container-industries .card-indus img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.industries .container-industries .card-indus .text-image {
  position: absolute;
  color: red;
  left: 0;
  top: 0;
}

.industries .container-industries .card-header {
  height: 4rem;
  display: flex;
  align-items: center;
  background: rgba(82, 134, 236, 0.6);
}

.industries .container-industries .card-header p {
  margin-left: 1rem;
}

<div class="industries">
  <div class="industries-icons">
    <h2> Our Industries</h2>
    <span class="border-1"></span>
    <div class="container-industries">
      <div class="card-indus">
        <div class="card-header">
          <p>Banking</p>
        </div>
        <div class="card-content">
          <img src="../images/services/finance.jpg">
          <p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
        </div>
      </div>

      <div class="card-indus">
        <div class="card-header">
          <p>Admin</p>
        </div>
        <div class="card-content">
          <img src="../images/services/admin.jpg">
          <p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
        </div>
      </div>

      <div class="card-indus">
        <div class="card-header">
          <p>Law</p>
        </div>
        <div class="card-content">
          <img src="../images/services/law.jpg">
          <p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
        </div>
      </div>

      <div class="card-indus">
        <div class="card-header">
          <p>Retail</p>
        </div>
        <div class="card-content">
          <img src="../images/services/retail.jpg">
          <p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
        </div>
      </div>
      <div class="card-indus">
        <div class="card-header">
          <p>Telecom</p>
        </div>
        <div class="card-content">
          <img src="../images/services/telecom.jpg">
          <p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你必须做两件事:

1- 将 text-image div 移动到 img div 之前。

2- 如您所述，从 img 中删除 position: absolute;。

  .industries .container-industries .card-indus {
      position: relative;
      border: red solid 1px;
      color: white;
      max-height: 300px;
      overflow: hidden;
      height: 100%;
    }

    .industries .container-industries .card-indus img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.5;
    }

    .industries .container-industries .card-indus .text-image {
      color: red;
      left: 0;
      top: 0;
    }

    .industries .container-industries .card-header {
      height: 4rem;
      display: flex;
      align-items: center;
      background: rgba(82, 134, 236, 0.6);
    }

    .industries .container-industries .card-header p {
      margin-left: 1rem;
    }
  

 <div class="industries">
      <div class="industries-icons">
        <h2>Our Industries</h2>
        <span class="border-1"></span>
        <div class="container-industries">
          <div class="card-indus">
            <div class="card-header">
              <p>Banking</p>
            </div>
            <div class="card-content">
              <p class="text-image">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
                voluptatibus numquam eveniet doloremque dignissimos veniam.
              </p>
              <img src="../images/services/finance.jpg" />
            </div>
          </div>

          <div class="card-indus">
            <div class="card-header">
              <p>Admin</p>
            </div>
            <div class="card-content">
              <p class="text-image">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
                voluptatibus numquam eveniet doloremque dignissimos veniam.
              </p>
              <img src="../images/services/admin.jpg" />
            </div>
          </div>

          <div class="card-indus">
            <div class="card-header">
              <p>Law</p>
            </div>
            <div class="card-content">
              <p class="text-image">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
                voluptatibus numquam eveniet doloremque dignissimos veniam.
              </p>
              <img src="../images/services/law.jpg" />
            </div>
          </div>

          <div class="card-indus">
            <div class="card-header">
              <p>Retail</p>
            </div>
            <div class="card-content">
              <p class="text-image">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
                voluptatibus numquam eveniet doloremque dignissimos veniam.
              </p>
              <img src="../images/services/retail.jpg" />
            </div>
          </div>
          <div class="card-indus">
            <div class="card-header">
              <p>Telecom</p>
            </div>
            <div class="card-content">
                <p class="text-image">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
                    voluptatibus numquam eveniet doloremque dignissimos veniam.
                  </p>
              <img src="../images/services/telecom.jpg" />
            </div>
          </div>
        </div>
      </div>
    </div>