Question

我有3列看起来像这样：

<div style="width:900px;margin:0 auto" id="container">
  <div style="width:100px; float:left">
    left
  </div>
  <div style="width:600px; float:left">
    main
  </div>
  <div style="width:200px; float:left" id="nav-col">
    <div id="navigation-list">
    </div>
  </div>
</div>

不确定这是否可行，但我希望每当窗口滚动时#navigation-list都会停留在屏幕上。它应该从document.body的顶部以及#nav-col的左右坐标之间保持大约100px

主要的困难是#container会在调整窗口大小时动态居中。

有没有办法在纯CSS中执行此操作？

Answer 1

我认为用纯CSS不可能..

你需要在该元素上使用position:fixed，但它根本不会尊重它的容器..

Answer 2

~~诀窍是在封闭容器上使用position: relative。~~实际上，它足以在{{1}之后不指定left或top }。这似乎可以解决问题。我还将您的样式移动到CSS中，并删除了900px宽度（for testing purposes）。

CSS

position: fixed

HTML

#container {
    position: relative;
    margin: 0 auto;
}

#container #left {
    float: left;
    width: 100px;
}

#container #main {
    padding-right: 200px;
    padding-left: 100px;
}

#container #nav-col {
    float: right;
    width: 200px;
    margin-left: -200px;
}

#container #navigation-list {
    position: fixed;
}

滚动时CSS半绝对定位元素

2 个答案:

CSS

HTML