html - 将div放在固定的div中

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 出现在左边，固定菜单不会出现，因为它在 content div 下。

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

谢谢。

Answer 1

首先要注意的事情之一是，通过将位置 Fixed 放在 div#fixed-menu 上会使其脱离正常的文档流。这意味着其他 block /内联级元素不知道它。同样，通过固定它，您可以使其相对于窗口固定。如果您希望它“固定”在容器内而不是屏幕上的某个点，我会使用 position:absolute 然后是 position:relative 在它的父容器上。

无论哪种方式，您在 div#content 不遵守固定元素的位置时遇到的问题是由于固定元素不再是正常文档流的一部分。将 z-index 添加到 div#fixed-menu 应该将其置于内容之上。但是，您会看到重叠，并且必须考虑 div#content 的偏移量与 div#content 上的边距或父容器上的填充。

如果你看看这个 fiddle :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-indexes，您可能希望查看 less 或 sass 之类的库来创建全局 css 变量，这将使管理可能变成几乎无法管理的体验变得更加容易。

希望对您有所帮助。