的CSS：

Question

我想在左边和附近放置一个div我想要放置其他div。

想象一下一个Twitter网页，我想修复左侧面板（你在那里写的推文），并且我想把面板放在你阅读推文的地方。

现在我有以下代码：

<div id="container">
  <div id=fixed-menu>
  </div>
  <div id="content">
  </div>
</div>

#fixed-menu {
     position:fixed;
     background: #fff;
     padding: 10px;
     top:60px;
     left: 10px;
     width:300px;
     max-width: 300px;
 }

#content {
    background: #fff;
    padding-top: 10px;
}

这样，id =“content”的div出现在左侧，因此固定菜单不会显示，因为它位于内容div下。

如果我在#content中使用margin-left，错误就解决了，但我不想使用它，还有其他任何解决方案吗？

感谢。

Answer 1

首先需要注意的一点是，将一个位置固定在div＃fixed-menu上会使其脱离正常的文档流程。这意味着其他块/内联级别元素不知道它。通过固定，您可以相对于窗口固定它。如果你想让它在容器内“固定”而不是屏幕上的某个点，我会选择位置：绝对位置，然后是位置：相对于它的父容器。

无论哪种方式，你遇到的问题是div＃content不遵守固定元素的位置，这是因为固定元素不再是普通文档流的一部分。将一个z-index添加到div＃fixed-menu应该将它带到内容之上。但是，您将看到重叠，并且必须考虑div＃content的偏移量与div＃content上的边距或父容器上的填充。

如果你看这个小提琴：http://jsfiddle.net/f38aj/

的CSS：

#container {
    position: relative;
    height: 700px;
    padding: 0 0 0 320px;
}

#fixed-menu {
     position: fixed;
     background: red;
     padding: 10px;
     top:8px;
     left: 8px;
     width: 300px;
     max-width: 300px;
 }

#content {
    background: blue;
    padding-top: 10px;
}

如果您注意到我们在容器中创建了填充，那么我们最终会覆盖div＃container对象。

左边有一个固定的容器，而右边的内容会随页面滚动。如果你能提出一个非固定的解决方案，它可能会更好，因为像旧版iOS的手机浏览器会采取任何位置固定的东西，并用绝对位置替换它。

附注，使用固定/绝对定位特别适用于某些疯狂的情况，但它确实需要对您/您的团队部分进行更多的尽职调查以进行维护。如果你开始进入z-index，你可能想要查看一个像less或sass这样的库来创建全局css变量，这样可以更容易地管理可能变成几乎无法管理的体验。

希望有所帮助。

将div放在固定div中

1 个答案:

的CSS：