在 CSS 中使用绝对位置时 div 重叠答案

【问题标题】：Divs overlap while using absolute position in CSS在 CSS 中使用绝对位置时 div 重叠
【发布时间】：2021-05-09 05:13:15
【问题描述】：

我正在尝试将 ID 为 our_team 的 div 放在 ID 为 services 的 div 下方。前者在使用absolute 定位时与后者重叠。

services div 通过使用absolute 定位在悬停时翻转以列出有关它的一些信息。 our_team div 只有一些 header 和 paragraph 标签，但它在第一个 div 上重叠。

如果我删除绝对定位，则 div 会正确排列，但会用空的白色块翻转。

所以，当我添加absolute 定位时，div 是重叠的。

HTML 和 CSS：https://jsfiddle.net/dasasathyan/8rjoqdnt/

【问题讨论】：

您有机会提供您想要的图像。我对结果应该是什么感到有点困惑。并且不要用first div second div来描述。 html 中有大约 20 个 div。具体说明您想要定位哪些元素（按名称）。此外，您所有的翻转卡片都共享相同的类，这使您很难针对一张卡片将其排除在外。
另外，css 中的 .services_heading 和 .services_card 是什么。这些元素在 html 中不存在。
@Justin 对歧义感到抱歉。我现在已经编辑了问题。
最快的方法是将位置应用到 our-team 。 #our_team { position: absolute; top: 200px; left: 40px; } 我不认为这是最好的方法。

标签： html css bootstrap-4

【解决方案1】：

我很难按照它所写的方式完成它。如果它对你来说不是太多的重写并且使用 flex 是可以的，这可能会起作用 HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</head>

<body>
  <div id="main_container">
    <div id="services">
      <div id="row1_cards">
        <div id="left_card">
          <div class="flip-card-front">
            <h3> Some Heading 1 that flips of first DIV </h3>
            <h6>1st Heading Description</h6>
          </div>
          <div class="flip-card-back">
            <ul class="services_list">
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
            </ul>
          </div>
        </div>

        <div id="right_card">
          <div class="flip-card-front">
            <h3> Some Heading 2 that flips of first DIV </h3>
            <p>2nd Heading Description</p>
          </div>
          <div class="flip-card-back">
            <ul class="services_list">
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div id="our_team">
      <div id="row2_team">
        <div class="col">
          <p>2nd Div that should come under the 1st Div</p>
        </div>
        <div class="col">
          <p>2nd Div that should come under the 1st Div</p>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

#main_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 750px;
  height: auto;
}
#row1_cards {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
#row2_team {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
#left_card {
  width: auto;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
#right_card {
  width: auto;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.flip-card-front {
  position: relative;
  width: inherit;
  height: inherit;
  padding: 45px 20px 0 20px;
  background: linear-gradient(to bottom, #0068a5 0%, #003367 100%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-back {
  position: relative;
  top: -200px;
  width: inherit;
  height: inherit;
  background-color: #2980b9;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
#left_card:hover {
  transform: rotateY(180deg);
}
#right_card:hover {
  transform: rotateY(180deg);
}

【讨论】：

【解决方案2】：

除非您想为元素定义高度，否则绝对位置会导致问题（如您所示）。另一种方法是使用不同的技术来使用 flex 定位和翻转卡片。

您可以使用 z-index 值（即transition: z-index, transform 0.6s;）进行转换，并使用以下方式移动元素：

.flip-card-back {
    background-color: #2980b9;
    transform: rotateY(180deg) translate(100%, 0);
}

这将允许您完全跳过使用position: absolute。我对小提琴进行了一些调整以向您展示，并且可以更改一些样式以满足您的需求（例如，让所有卡片与最大元素的高度相同）。

修改更改：https://jsfiddle.net/pie9/ftr6w9sj/

MDN docs for translate()MDN docs for z-index

【讨论】：