重叠的 div，需要它们彼此垂直答案

【问题标题】：Overlapping Divs, need them to be vertical on top of each other重叠的 div，需要它们彼此垂直
【发布时间】：2022-06-27 22:12:25
【问题描述】：

我正在尝试将它们垂直堆叠，但由于某种原因它们重叠并且不确定它是否与定位有关。我不太擅长 CSS。此外，是否有更简单的方法将日期时间跨度对齐到右侧，而不是使用 padding-left: 1140px？谢谢

<div class="content-box">
  <span class="name">John Doe</span>
  <span class="datetime">May 2022</span><br><br>
  <span class="content">Lorem ipsum</span>
</div>
<div class="content-box">
  <span class="name">Jane Doe</span>
  <span class="datetime">June 2022</span><br><br>
  <span class="content">Lorem ipsum</span>
</div>

.content-box {
    justify-content: center;
    top: 600px;
    position: absolute;
    width: 75%;
    border: none;
    outline: none;
    font-family: 'Roboto Mono', monospace;
    font-size: 18px;
    transform: translate(0);
    background-image: linear-gradient(45deg, #4568DC, #B06AB3);
    padding: 20px 40px;
    border-radius: 5px;
    box-shadow: 0 22px 44px rgba(128, 128, 128, 0.1);
    transition: box-shadow .25s;
    padding: 60px;
}

.content-box .name {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #4568DC, #B06AB3);
    font-size: 30px;
}

.content-box .content {
    color: #4568DC;
    font-size: 20px;
}

.content-box .datetime {
    padding-left: 1140px;
    color: black;
    font-size: 18px;
}

.content-box .content {
    color: #4568DC;
    font-size: 20px;
}

.content-box:after {
    content: '';
    border-radius: 4px;
    position: absolute;
    margin: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background: white;
}

.content-box:hover {
    background-image: linear-gradient(-45deg, #00FFFF, #ff1a1a);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: .5s;
}

.content-box:hover .name {
    background-image: linear-gradient(-45deg, #4568DC, #B06AB3);
}

【问题讨论】：

我不明白，你想要一个在另一个之上。第一个在页面开头，第二个在第一张卡片之后
如果是这样使用 CSS GRID jsfiddle.net/laaouatni/o5m4wzp1/2

标签： html css

【解决方案1】：

这里的问题是div 都有content-box 类；此类适用 position: absolute; ，这是重叠的主要原因。删除此 css 属性，您应该能够同时看到 div。

关于日期时间跨度，您可以更改类 .content-box .datetime { color: black; font-size: 18px; }（您必须删除填充）

并将以下属性添加到.content-box 类以正确显示日期时间而无需填充：

display: flex;
flex-flow: column;

【讨论】：