css 将div放置在另一个之上

yiytaume  于 2023-01-03  发布在  其他
关注(0)|答案(2)|浏览(195)

我试图将我的div .valorCard放在我的图像上。我希望div在图像的末尾有一部分,我在图像上使用了相对位置,在div上使用了绝对位置,在底部使用了一个值。但是div覆盖了我的第二部分,我不希望发生这种情况。有人能帮帮我吗?我不能。在我的第二节中不要使用绝对位置,因为它破坏了它的风格。

#valorContent {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.valorCard {
  padding: 0 24px;
  position: absolute;
  bottom: -190px;
  width: 150px;
}

.valorCard-content {
  border: 2px solid green;
  background-color: grey;
}
<section class="valor py-5 mt-4">
  <div class="container pt-5" id="valorContent">
    <div class="valorImagem">
      <img class="img-fluid" src="https://source.unsplash.com/user/c_v_r/414x421">
    </div>
    <div class="valorCard text-center">
      <div class="valorCard-content py-5 px-4">
        <h2 class="valor-titulo mx-4">
          Lorem Ipsum
        </h2>
        <hr>
        <div class="valor-lista">
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>
<section class="second">
  <div>
    <div>
      <div>
        <div>
          <p class="depoimento-txt">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div class="col-lg-5 cardbox cardbox-dep">
        <div class="p-4 pt-5 mx-2">
          <p class="depoimento-txt">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
yc0p9oo0

yc0p9oo01#

根据你的解释,我认为这是你所希望的行为。
最常见的。您已经使用了带有列的Flexbox,这很好。如果您想重新排列Flex容器中的元素,则无需使用位置:绝对的。你只需要用这个顺序:NUMBER属性对Flex内的元素进行排序。

#valorContent {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.valorCard {
  padding: 0 24px;
  bottom: -190px;
  width: 60%;
  order: 0;
}

.valorImagem {
    order: 1;
}

.valorCard-content {
  border: 2px solid green;
  background-color: grey;
}
<section class="valor py-5 mt-4">
  <div class="container pt-5" id="valorContent">
    <div class="valorImagem">
      <img class="img-fluid" src="https://source.unsplash.com/user/c_v_r/414x421">
    </div>
    <div class="valorCard text-center">
      <div class="valorCard-content py-5 px-4">
        <h2 class="valor-titulo mx-4">
          Lorem Ipsum
        </h2>
        <hr>
        <div class="valor-lista">
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>
<section class="second">
  <div>
    <div>
      <div>
        <div>
          <p class="depoimento-txt">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div class="col-lg-5 cardbox cardbox-dep">
        <div class="p-4 pt-5 mx-2">
          <p class="depoimento-txt">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
vdzxcuhz

vdzxcuhz2#

如果我没理解错您的意图,您可以将overflow: hidden;添加到#valorContent的css中以隐藏溢出部分:

#valorContent {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.valorCard {
  padding: 0 24px;
  position: absolute;
  bottom: -190px;
  width: 150px;
}

.valorCard-content {
  border: 2px solid green;
  background-color: grey;
}
<section class="valor py-5 mt-4">
  <div class="container pt-5" id="valorContent">
    <div class="valorImagem">
      <img class="img-fluid" src="https://source.unsplash.com/user/c_v_r/414x421">
    </div>
    <div class="valorCard text-center">
      <div class="valorCard-content py-5 px-4">
        <h2 class="valor-titulo mx-4">
          Lorem Ipsum
        </h2>
        <hr>
        <div class="valor-lista">
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
          <div class="item ">
            <h4 class="mx-4">Test</h4>
          </div>
          <hr>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>
<section class="second">
  <div>
    <div>
      <div>
        <div>
          <p class="depoimento-txt">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div class="col-lg-5 cardbox cardbox-dep">
        <div class="p-4 pt-5 mx-2">
          <p class="depoimento-txt">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

相关问题