Question

基本上箭头的条形div当前与标题div重叠。我喜欢bar div位于标题div下面。

据我所知，由于名称和矩形div是绝对定位的，因此它们不像往常那样占用空间，但我不知道如何使条形div显示在标题div下面。一个简单的解决方法是为条形图提供足够的上边距或填充，直到它位于标题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放在另一个下方，同时将它们保持为相对位置。

防止相对div重叠

1 个答案: