Div未在父容器中正确定位

Question

我在一个名为#content_container的容器中有两个div。

我的div是#lightbox_block，它包含一个带有4个较小矩形的大黑色矩形和#advertisement_bar，目前只是平坦的。

我希望#advertisement_bar出现在#lightbox_block下面，但它似乎坚持#content_container的顶部。我试图添加一个相对定位标签来强制它，但它仍然坚持，任何提示都非常感谢！

＆＃13;

＆＃13;

#content_container {
  width: 930.75px;
  height: 620px;
  margin-left: 10px;
  margin-right: 0px;
  margin-top: 0px;
  background-color: white;
}
#lightbox_block {
  width: 930.75px;
  height: 324.00px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 6px;
  position: absolute;
}
#advertisement_bar {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a0a0a+0,222222+80,232323+100 */
  background: rgb(10, 10, 10);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(10, 10, 10, 1) 0%, rgba(34, 34, 34, 1) 80%, rgba(35, 35, 35, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(10, 10, 10, 1) 0%, rgba(34, 34, 34, 1) 80%, rgba(35, 35, 35, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(10, 10, 10, 1) 0%, rgba(34, 34, 34, 1) 80%, rgba(35, 35, 35, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0a0a0a', endColorstr='#232323', GradientType=0);
  /* IE6-9 */
  position: absolute;
}

＆＃13;

<div id="content_container">

  <div id="lightbox_block">
  </div>

  <div id="advertisement_bar">
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

问题的屏幕截图

Answer 1

position absolute CSS中#advertisement_bar position absolute，top默认情况下会使其保持在顶部，除非您定义bottom或top属性。

您可以为#light_box提供比var json = JSON.parse(body); var json_data = json.playerStatSummaries[0].playerStatSummaryType; console.log(json_data); 更多的信息，或者为其提供不同的职位值。

您可以在Mozilla Developers documentation。

中详细了解相关信息

Answer 2

您应该删除position: absolute，因为position: absolute会将该元素从正常页面流中删除。在这种情况下，如果您希望将两个子div放入父容器中，这是一种方法：

.parent {
width: 992px;
height: 400px;
}
.first-child {
width: 100%;
height: 200px;
display: block;
}
.second-child {
width: 100%;
height: 200px;
display: block;
}

<div class="parent">
<div class="first-child">Hello world</div>
<div class="second-child">Hello again</div>
</div>

如果你坚持使用position: absolute，那么你必须将top: ~300px ...添加到你的第二个div中，强迫＆＃34;它低于你的第一个div。我不推荐它。而且你还必须将position: relative添加到你的父div中，这样你的孩子就相对于父母而不是窗口。

Answer 3

问题在于内容容器和其中一个margin-left值，我将块设置为绝对值，相对值，相对值并删除了margin-left，它现在可以正常工作了！