HTML和CSS的定位问题[关闭]

Question

我正在开发一个网页，其中包含几部分内容、一个图像幻灯片和一个顶部固定导航栏。我的问题与幻灯片的布局有关。我将幻灯片设置为使用绝对定位，但它位于我的其他内容之上。我能够让我的其余内容在页面上移动到较低位置的唯一方法是对所有内容使用绝对定位。如果我尝试使用容器并使用相对定位，它会移动我的右/左选择器箭头并使整个幻灯片混乱。谁能告诉我一个更好的方法来沿页面以这种方式定位内容？

HTML

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

#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;
}

Answer 1

绝对定位（连同固定）将元素从标准布局流程中移除，这就是为什么其他所有内容都“四处移动，解决它的唯一方法是绝对定位所有内容。”

但是，还有另一种解决方案。

取当前绝对定位的 div，将其包裹在另一个 div 中，并使该 div 相对定位。您可能必须对其施加一些宽度/高度，但这将保持流畅。