Question

我遇到的问题是将相对div置于绝对div之下。

有一个视频根据浏览器的宽度来调整其高度，然后我必须得到一个div来将自己定位在它的正下方，使用绝对位置我能够通过.contain实现这一点

然而，我需要做到这一点，以便我可以将其他div放在.contain之下。随着小提琴，我试图让绿色条相对（.para1）位于定位绝对（.contain）之下。我可以使用负边距来快速解决问题，但是当在.para1下面放置更多div时，我必须在每个下面都有相同的边距。

以下是完整插图的小提琴：http://jsfiddle.net/L232uhpr/

有问题的代码：

HTML：

    <div class="contain">
        <div class="divider">
            <div class="txt_wrap">
                <p class="center_h1">WHAT I DO</p>
            </div>
        </div>
    </div>
    <div class="para1">
        <div class="para_wind" data-parallax="scroll" data-image-src="images/bg1.png">
        </div>
    </div>

CSS：

/*divider*/
.contain .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 10px;
  z-index: -1;
}
.divider{
    width: 100%;
    height: 100px;
    background-color: #ccc;
}
.txt_wrap{
    width: 160px;
    margin-left: 45%;
}
/*Parallax 1 Styling*/
.para1{
    width: 100%;
    height: 100px;
    position: relative; 
    background: green;
}

Answer 1

您可以在CSS中添加填充底部，然后将其删除：

.contain .divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* padding-bottom: 10px; */
    /* z-index: -1; */
}

Answer 2

我认为通过移除padding-bottom:10px您将获得所需的输出

    .contain .divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* padding-bottom: 10px; */
  z-index: -1;
}

请检查http://jsfiddle.net/L232uhpr/2/

相对div定位？

2 个答案: