如何正确定位绝对和相对定位

Question

我正在开发一个网页，其中包含几部分内容、一个图片幻灯片和一个顶部固定导航栏。我的问题与幻灯片的布局有关。我将幻灯片设置为使用绝对定位，但它位于我的其他内容之上。

我能够让我的其余内容在页面上向下移动的唯一方法是对所有内容使用绝对定位。如果我尝试使用容器并使用相对定位，它会移动我的右/左选择器箭头并使整个幻灯片混乱。

谁能告诉我一个更好的方式来沿页面以这种方式定位内容？

#doc {
  margin: 40px 0;
}
#content {
  margin: 0 auto;
  max-width: 1140px;
}
#container {
  max-width: 1140px;
  margin-top: 110px;
}
#leftHolder {
  height: 100%;
  width: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
  margin-left: 65px;
}
#rightHolder {
  height: 100%;
  width: 100px;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-right: 15px;
}
.left {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  left: 0px;
}
.right {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  right: 0px;
}
#img {
  height: 600px;
  width: 1140px;
  position: absolute;
}

<div id="doc">
  <div id="content">
    <div id="container">
      <img src="Images/Slideshow/img1.jpg" id="img" />
      <div id="leftHolder">
        <img onClick="slide(-1)" class="left" src="Images/arrowLeft.png" />
      </div>
      <div id="rightHolder">
        <img onClick="slide(+1)" class="left" src="Images/arrowRight.png" />
      </div>
    </div>
  </div>
</div>

Answer 1

您几乎是正确的，但您只需要更改几处。

1. 更改#rightHolder 和#leftHolder 的width 属性。
2. 删除margins。
3. 给家长position: relative。
4. 负margin-top 为持有者至其heights 的一半。
5. 主图像的静态positioning。

还有更多对文档的更改。下面的 sn-p 工作正常。如果您需要更多帮助，请查看并告诉我。

#doc {
  margin: 40px 0;
  position: relative;
}
#content {
  margin: 0 auto;
}
#container {
  max-width: 1140px;
}
#leftHolder {
  height: 100%;
  width: 50px;
  position: absolute;
  left: 0px;
  top: 50%;
}
#rightHolder {
  height: 100%;
  width: 50px;
  position: absolute;
  right: 0;
  top: 50%;
}
.left, .right {
  height: 50px;
  width: 50px;
  display: block;
  margin-top: -25px;
}
#img {
  height: 600px;
  width: 1140px;
  max-width: 100%;
}

<div id="doc">
  <div id="content">
    <div id="container">
      <img src="Images/Slideshow/img1.jpg" id="img" />
      <div id="leftHolder">
        <img onClick="slide(-1)" class="left" src="Images/arrowLeft.png" />
      </div>
      <div id="rightHolder">
        <img onClick="slide(+1)" class="left" src="Images/arrowRight.png" />
      </div>
    </div>
  </div>
</div>