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

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. 更改width和#rightHolder。{/ li>的#leftHolder属性
2. 删除margin s。
3. 将position: relative提供给家长。
4. 对于margin-top的一半持有者，负height。
5. 静态position主图像。

对文档进行了更多更改。下面的代码片段工作正常。如果您需要更多帮助，请检查并告诉我们。

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