在两个部分之间放置一个箭头框

Question

我真的不知道如何处理这个，但这就是我想要做的，放置白色箭头框：

我知道如何做一个箭盒，但把它放在那里对我来说是一个谜。目前我有两个部分，上部和下部，然后尝试给盒子一个绝对位置，但没有工作。

我该如何处理这个问题？我确信有一个简单的解决方案，但我不熟悉CSS。

Answer 1

明显误解了你的问题。请参阅更新后的JSFiddle。

这会在中间圆圈下方放置一个绿色块，但是通过提供position: absolute，您可以使用margin-top更改位置。我不知道这对响应式网站的反应如何，你可能想稍微调整一下。

编辑2：更好的方法是将白色块放在圆圈上方的div中。查看此更新的JSfiddle。

HTML

<div class="main">
    <div class="container0">
        <div class="hover2"></div>
    </div>
</div>

CSS

.main {
    margin-top:100px;
}
.hover2 {
    height: 50px;
    width: 100px;
    background: green;
    margin-left:180px;
    position: absolute;
    margin-top:60px;
}

.container0 {
    background: purple;
    width: 100%;
    height:100px
}

Answer 2

我自己并不了解你的问题。如果你试图将你的盒子放在下面蓝色容器的中间位置：position：absolute我会自己试试

.box {
    height:100px;
    width:300px;
    background-color:red;    
    position:absolute;
    top:-50px;
    left:50%;
    margin-left:-150px; /*this has to be half your box width negative margin*/
}

不要忘记相对于你的蓝色div添加位置（或者是固定的，或绝对的......只是不是默认的静态）。作为示例的小提琴（我添加css框箭头以防万一你需要它）：http://jsfiddle.net/j5a0227s/1/

Answer 3

用div分割你的两个部分，仔细看看这篇有趣的文章：Centering in CSS: A Complete Guide。