滚动时CSS半绝对定位元素

我有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中执行此操作？

已邀请:

2 个回复

鞋扣蚊冈借

我认为用纯CSS不可能.. 你需要在那个元素上使用position:fixed，但它根本不会尊重它的容器。

耐钨徒

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

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

HTML

<div id="container">
    <div id="left">
        left<br /> left<br /> left<br />
        left<br /> left<br /> left<br />
    </div>
    <div id="nav-col">
        <div id="navigation-list">
            nav<br /> nav<br /> nav<br />
            nav<br /> nav<br /> nav<br />
        </div>
    </div>
    <div id="main">
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
    </div>
</div>

要回复问题请先登录或注册

滚动时CSS半绝对定位元素

2 个回复

发起人

问题状态

滚动时CSS半绝对定位元素

与内容相关的链接

2 个回复

发起人

问题状态