Question

我的智慧结束了这个。

我有几个div。他们都有一个向下箭头。它应该位于中间，棕色线和一切的顶部。最后一个div也应该有箭头。我试过z-index，绝对＆amp;相对定位，无效。

如果单击标题，则会打开该框。箭头应保持在确切位置的线上。这对我来说似乎并不那么困难，但不知怎的，我无法让它发挥作用。

这是一个小提琴：

<article id="made" data-magellan-destination="made">


<div class="blocks-holder wide made">
    <div class="block wide" id="">
        <div class="openblock">
            <div class="maak-competences">
                 <h2>title</h2>

                 <h4>tagline</h4>

                <div class="arrow-down"></div>
            </div>

提前非常感谢！

Answer 1

从箭头中删除绝对定位，然后将其设置为显示为block，并将其margin: 0 auto集中在一起：

.arrow-down {
    ...    
    background-position: bottom;
    display: block;
    margin: 0 auto -36px auto;    
}

请注意，我还将其background-position设置为bottom，以使背景图片直接位于元素的底部。

JSFiddle demo

来自评论的

编辑：

是的，它应该只是在棕色线下面，所以看起来像这样：----- v ------- V的两个点应该接触线

这是一个很大的变化。我们需要从各个块中移除背景（以阻止它们与箭头重叠），然后从块容器中移除浮子（以固定高度），最后给容器增加白色背景并增加箭头的负边距：

.blocks-holder .block {
    ...
    float: left; /* Remove this. */
}

.blocks-holder .block.wide {
    ...
    background: transparent;
}

.blocks-holder.wide {
    ...
    background: #fff;
}

.arrow-down {
    ...
    margin: 0 auto -46px auto;    
}

JSFiddle demo

箭头定位在一条线上，高于所有div

1 个答案: