时间戳

首页 > 解决方案 > “绝对”文本容器下方的位置划分

css - “绝对”文本容器下方的位置划分

问题描述

我想在图像上方有一个叠加层，据我所知 position:absolute 是唯一的选择。现在，只要屏幕宽度低于某个阈值，下面的文本就会被覆盖层覆盖。我怎样才能防止这种情况？

.text-and-image {
  position: relative;
  margin-left: 5%;
  width: 90%;
  max-height: 80vh;
  display: flex;
  margin-bottom: 10vh;
}

.text-and-image-box{
  width: 100%;
  position:relative;
  height: auto;
  max-height: 75vh;
  overflow:hidden;
}

.text-and-image-image{
  width: 100%;
  object-fit: cover;
}


.text-and-image-box2{
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 40%;
  left: 55%;
  width: 40%;
  padding: 3%;
  background: white;
}

.text-section{
  position: relative;
  width: 70%;
  margin-left: 15%;
}
<div class="text-and-image">

  <div class="text-and-image-box">
    <img class="text-and-image-image" src="https://images.unsplash.com/photo-1514986888952-8cd320577b68?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1055&q=80">
  </div>

  <div class="text-and-image-box2">

    <h3 class="text-and-image-text">Ein schlechtes Messer fährt leichter in die Hand als ins Brot."</h3>
    <p class="text-and-image-text">Jeder Hobby- oder Profikoch braucht gutes Werkzeug. Nur damit macht es Spaß und ist sicher. Solinger Küchenmesser und Stahlwaren bestechen schon seit Jahrhunderten durch ausgezeichnete Qualität, hohe Langlebigkeit und innovative Lösungen. Das merkt man und hat seinen Weg schon in Millionen von Küchen in aller Welt gefunden. Unser Statement: </p>
  </div>
</div>

<div class="text-section">
 <h1 id="main-headline"> Bestes deutsches Traditionshandwerk für Ihre Kunden </h1>
 <h2 id="sub-headline">Küchenmesser & Stahlwaren</h2>
 <p class="information">
  Ihre Kunden haben eine hohe Erwartung an Sie
</p>
</div>

标签： css

解决方案

将@media 用于单个屏幕尺寸

@media (max-width: 767px) {
.text-and-image-box2 {
    box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 20%);
    position: absolute;
    top: 20%;
    left: 35%;
    width: 60%;
    padding: 3%;
    background: white;
}

}

推荐阅读