代码之家 › 专栏 › 技术社区 › Dex

滚动时CSS半绝对定位元素

css

Dex · 技术社区 · 15 年前

<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顶部以下大约100px的位置,也应该保持在文档的左右坐标之间 #nav-col

主要困难在于 #container 当窗口调整大小时,它将自动居中。

有没有一种方法可以在纯CSS中实现这一点?

2 回复 | 直到 15 年前

Gabriele Petrioli 15 年前

我认为用纯CSS是不可能的。。

你需要使用 position:fixed 但它根本不尊重它的容器。。

Eric 15 年前

~~position: relative 在封闭容器上。~~ 事实上,它的作用是足够的,只是没有具体说明 left 或 top 之后 position: fixed for testing purposes ).

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>â

推荐文章