Полуабсолютно позиционируемый элемент CSS при прокрутке

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 оставался на экране всякий раз, когда окно прокручивается.Он должен оставаться примерно на 100 пикселей ниже от верхней части документа. Тело, а также между левой и правой координатами #nav-col

Основная трудность заключается в том, что #container будет динамически центрироваться при изменении размера окна..

Есть ли способ сделать это в чистом CSS?

Answer 1

Хитрость заключается в том, чтобы использовать position: relative на вмещающем контейнере. На самом деле, он работает достаточно, чтобы просто не указывать left или top после position: fixed.Это, кажется, делает трюк.Я также перенес ваши стили в CSS и удалил ширину 900 пикселей ( для целей тестирования ).

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

Answer 2

Я думаю, что это невозможно с чистым CSS ..

Вам нужно будет использовать position:fixed для этого элемента, но тогда он вообще не будет уважать свой контейнер.