1

这可能是一个初学者的问题，但我似乎无法弄清楚。

HTML：

        <div id = "upper">
            <input id = "leftBigArrow" class = "button" type="button">
            <div id = "picBox">
                <img id = "bigPic" src="images/IMG_1744.JPG" alt="">
                <div id = "overlay">
                    <div id = "olText">
                        <h1>Title</h1>
                        <p>Description</p>
                    </div>
                </div>
            </div>
            <input id = "rightBigArrow" class = "button" type="button">
        </div>

CSS：

#upper {
    display: flex;
    background: white;
    box-shadow: 0px 0px 7px 2px #313131;
}

#picBox {
    width: 800px;
    height: 600px;
    background-color: #8D918D;
    display: flex;
}

#pigPic {
    object-fit: contain;
    object-position: center;
    z-index: 1;
}

#overlay {
    align-self: flex-end;
    width: 100%;
    height: 20%;
    background-color: black;
    color: white;
    opacity: 0.6;
    margin: 0;
    font-size: 80%;
    z-index: 2;
}

#olText {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

h1, p {
    margin-left: 20px;
    
}

h1 {
    margin-top: 0;
    margin-bottom: 10px;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

在#picBox 中，我有 2 个项目，一个带有 object-fit 属性的图像（#bigPic）和一个带有 2 个文本项（#overlay）的 div 的 div。我想在图像上叠加。#picBox 底部的叠加高度为 20%，#olText 中的 2 个文本项需要按 css 显示排列。如果我使用绝对位置和相对位置，它会弄乱对象拟合。那么我怎样才能按照我的预期进行这项工作呢？

4

1 回答 1

1

在 CSS 中，如果要覆盖一个元素，则该元素的位置（在本例中为 #picBox）需要首先设置为相对位置。然后你想要在顶部的元素的位置（#overlay）应该设置为绝对。请参见下面的示例。

#upper {
  display: flex;
  background: white;
  box-shadow: 0px 0px 7px 2px #313131;
}

#picBox {
  width: 800px;
  height: 600px;
  background-color: #8D918D;
  display: flex;
  position: relative;
}

#pigPic {
  object-fit: contain;
  object-position: center;
  z-index: 1;
}

#overlay {
  align-self: flex-end;
  width: 100%;
  height: 20%;
  background-color: black;
  color: white;
  opacity: 0.6;
  margin: 0;
  font-size: 80%;
  z-index: 2;
  position: absolute;
}

#olText {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

h1,
p {
  margin-left: 20px;
}

h1 {
  margin-top: 0;
  margin-bottom: 10px;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}
<div id="upper">
  <input id="leftBigArrow" class="button" type="button">
  <div id="picBox">
    <img id="bigPic" src="https://www.w3schools.com/tags/img_pink_flowers.jpg" alt="">
    <div id="overlay">
      <div id="olText">
        <h1>Title</h1>
        <p>Description</p>
      </div>
    </div>
  </div>
  <input id="rightBigArrow" class="button" type="button">
</div>

于 2021-08-13T10:19:56.313 回答