Question

我非常想复制你在下图中看到的内容。我有三个部分。在第1部分和第2部分（蓝色部分）之间，您可以看到白色箭头框。这就是我可以正确放置的东西，而不会搞砸了。

enter image description here

现在我已经得到了这个＆＃34;工作＆＃34;通过将箭头框放在蓝色部分内，然后同时给出箭头框和蓝色部分的绝对位置，然后从顶部给出箭头框一些减去边距。这个问题是，由于某些原因，我不能创建应该在蓝色部分之后的第3部分。如果它的位置是绝对的，我不能在蓝色部分下面放置任何东西。如果我给蓝色部分一个相对位置，事情显然会再次开始正常工作，但随后箭头框就会出现问题：

enter image description here

我的代码看起来像这样，HTML：

<section id="first-section">
<!-- bunch of stuff here -->
</section>
<section id="blue-section">
    <div class="arrow_box">
        <p>How can I help you?</p>
    </div>    
</section>
<section id="third-section">
<!-- More stuff here -->
</section>

CSS：

#blue-section {
position: relative;
}
.arrow_box {
    position: absolute;
    width: 500px;
    height: 100px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    margin-top: -50px;
}

Answer 1

好的，然后你走了：

<强> HTML

<section class="container" id="first-section">
<!-- bunch of stuff here -->
</section>
<section class="container"  id="blue-section">
    <div class="arrow_box">
        <p>How can I help you?</p>
    </div>    
    <div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
    <div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
    <div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
</section>
<section class="container"  id="third-section">
<!-- More stuff here -->
</section>

<强> CSS：

.container{position:relative; background:#ccc; padding:40px; width:100%; height:auto; min-height:100px;  text-align:center;}
#blue-section{background:#06c}
.arrow_box{position:absolute; background:#f9f9f9; position:absolute; top:-50px; left:50%; margin-left:-100px; height:100px; width:200px;}
.col{width:30%; padding:1%; display:inline-block;}
.col img{width:200px; height:200px; border-radius:50%;}

正如你所看到的，你没有那么错，你只需要明白绝对定位需要一个相对定位的div才能自己定位。

查看可能的值，以便了解(from Mozilla MDN)

<强>静态此关键字允许元素使用正常行为，即它在流中的当前位置布局。 top，right，bottom，left和z-index属性不适用。
<强>相对这个关键字列出了所有元素，就像元素没有定位一样，然后调整元素的位置，而不改变布局（从而为元素留下了一个空隙，如果它没有被定位）。 position：relative对表的影响 - * - group，table-row，table-column，table-cell和table-caption 元素未定义。
<强>绝对不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会与任何其他边缘一起折叠。
<强>固定不要为元素留出空间。而是将其定位在相对于屏幕视口的指定位置，并在滚动时不移动。打印时，将其放在每页的固定位置。
<强>粘性箱位置根据正常流量计算（这称为正常流量中的位置）。然后该框相对于其流根和包含块偏移，并且在所有情况下，包括表格元素，都不会影响任何后续框的位置。当盒B粘贴时，计算下一个盒子的位置，好像B没有偏移。 'position：sticky'对表元素的影响与'position：relative'相同。

如果你在这里，你get a free fiddle

Answer 2

<body>
<!-- //take it as example, it may help u, just make the arrows boxed div child of blue div ,
//i ll call upper white section as white as give it white as id, arrow boxed as box,blue as blue
-->
<div id="container">
    <div id="upper">
    <!--//content of this div;-->
    </div>
    <div id="blue">
        <div id="box" style="position:relative; top:-100px; z-index:10000; margin:0 auto;    width:40%;">
        <!-- // adjust top attr.-->
        </div>

        <!--//here blue sectiions content is inside lower part.-->
        <div id="lower" style="margin-top:200px"> 
        <!--//try as much u want to space to be below thw box;-->
        </div>


   </div>
</div>
</body>

在两个部分之间放置一个div，使其部分位于两个部分之上

2 个答案: