Html 在两个部分之间放置一个div，使其'；它部分地在它们上面_Html_Css_Floating_Sections

Html 在两个部分之间放置一个div，使其'；它部分地在它们上面

html css

Html 在两个部分之间放置一个div，使其'；它部分地在它们上面,html,css,floating,sections,Html,Css,Floating,Sections,我正试图复制你在下图中看到的内容。我有三个部分。在第1节和第2节（蓝色部分）之间，您可以看到白色箭头框。这就是我不能在不把事情搞砸的情况下正确放置的地方现在我已经通过将箭头框放在蓝色区域内得到了这个“工作”，然后给出箭头框和蓝色区域的绝对位置，然后给箭头框一些从顶部开始的负边距。问题是，由于某种原因，我不能创建应该在蓝色部分之后的第3部分。如果蓝色部分的位置是绝对的，我不能把任何东西放在它下面。如果我给蓝色部分一个相对位置，很明显事情又开始正常工作了，但是箭头框不合适，类似这样的事情发生了：

我正试图复制你在下图中看到的内容。我有三个部分。在第1节和第2节（蓝色部分）之间，您可以看到白色箭头框。这就是我不能在不把事情搞砸的情况下正确放置的地方

现在我已经通过将箭头框放在蓝色区域内得到了这个“工作”，然后给出箭头框和蓝色区域的绝对位置，然后给箭头框一些从顶部开始的负边距。问题是，由于某种原因，我不能创建应该在蓝色部分之后的第3部分。如果蓝色部分的位置是绝对的，我不能把任何东西放在它下面。如果我给蓝色部分一个相对位置，很明显事情又开始正常工作了，但是箭头框不合适，类似这样的事情发生了：

我的代码如下所示，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>

好的，那就给你：

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>

正如您所看到的，您并没有错，您只需要了解绝对定位需要相对定位的div才能定位自身

查看可能的值以便您理解

静态该关键字允许元素使用正常行为，即它在流中的当前位置进行布局。顶部、右侧、底部、左侧和z索引属性不适用
相对的 该关键字将所有元素都当作未定位元素一样进行布局，然后调整元素的位置，而不更改布局（从而在未定位元素的位置留下间隙）。位置的影响：相对表-*-组、表行、表列、表单元格和表标题元素未定义
绝对值 不要为元素留空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的框可以有边距，它们不会与任何其他边距一起折叠
固定的 不要为元素留空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不移动。打印时，将其放置在每页的固定位置
粘性根据正常流量计算箱子位置（这称为正常流量中的位置）。然后，该框相对于其流根和包含块进行偏移，并且在所有情况下（包括表元素），都不会影响以下任何框的位置。当框B处于粘滞位置时，将计算以下框的位置，就像B未偏移一样。“position:sticky”对表元素的影响与“position:relative”相同

如果你在这里成功了，你的代码在哪里？你做了什么？我添加了一个简短的代码版本

<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>

<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>

.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%;}