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

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

然而，还有另一种解决方案。

取目前绝对定位的div，将其包装在另一个div中，并使该div相对定位。您可能必须在其上强制执行一些宽度/高度，但这将保持流量。

定位HTML和CSS的问题

1 个答案: