防止相对div重叠

Question

基本上，箭头的栏div当前与标题div重叠。我想把bar div放在title div下面。

我知道由于名称和矩形div是绝对定位的，它们不会像通常那样占用空间，但我不知道如何使bar div显示在title div下面。一个简单的解决办法是给栏足够的上边距或填充，直到它位于title div的下方，但这似乎是一个糟糕的方法。有没有更好的方法来实现这一点？

这是一个jsfiddle

HTML

<div>NAME</div>

<div class="title">
    <div class="name">JOHNATHAN DOE</div>
    <div class="rectangle"></div>
</div>

<div class="bar">
    <a class="step" href="#">
        <div class="arrowEnd"></div>
        <div class="arrow">some stuff</div>
        <div class="arrowPointer"></div>
    </a>
    <a class="step" href="#">
        <div class="arrowEnd"></div>
        <div class="arrow">some stuff</div>
        <div class="arrowPointer"></div>
    </a>
    <a class="step" href="#">
        <div class="arrowEnd"></div>
        <div class="arrow">some stuff</div>
        <div class="arrowPointer"></div>
    </a>
</div>

CSS

.title {
    position: relative;
    top: 0px;
    left: 0px;
}
.rectangle {
    height: 75px;
    width: 75px;
    position: absolute;
    right: 0px;
    background: red;
}
.name {
    font-size: 3em;
    position: absolute;
    left: 0px;
}

.arrow {
    width: 28%;
    height: 24px;
    background: #777777;
}

.arrowPointer {
    border-left: 12px solid #777777;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid transparent;
    font-size: 0; 
    line-height: 0; 
    width: 0;
}

.arrowEnd{
    border-left: 12px solid transparent;
    border-top: 12px solid #777777;
    border-bottom: 12px solid #777777;
    border-right: 12px solid #777777;
    font-size: 0; 
    line-height: 0; 
    width: 0;
}

.bar > a > div {
    float: left;
}

Answer 1

根据定义，绝对定位是基于CSS中的指定坐标放置的。如果你想把栏放在标题下面，把它设为“相对的”。如果你有一个理由不想让它成为相对的，也许有一种方法可以绕过它。

此外，当您希望调整窗口大小、在不同设备上查看网站或在不同分辨率和/或DPI的屏幕上查看网站时，基于相对定位制作样式表也非常有用。

编辑答案：JSFiddle使用Clear:both将你的div放在另一个下面，同时保持它们的相对位置。