ДИВ с `позиции: fixed`, но стил имеют такое же поведение, как с` позиции: relative`

Question

При работе с position:fixed; это ожидаемый результат можно было бы получить:

То, что я на самом деле хочу achive является:

как в этот результат при работе с двумя position: relative; элементами

Не поймите меня неправильно, я знаю, как position: fixed или position: absolute работы и должны вести себя, как я не пришел вокруг, как получить оба свойства для одного DIV ...

Один из подходов, который работает, но не является удовлетворительным решением, заключается в том, что я положил position: relative -div ниже моего фиксированного элемента, не позволяя второму элементу двигаться ниже фиксированного элемента, потому что он уже занят дополнительным div.

Так что я пытался получить эту второго относительного DIV работой с :afterили:before псевдо-элементами. Это не совсем похоже на работу

div:after, div:before { position: relative; } 

это каким-то образом получить смешивается, потому что сам элемент

div { position: fixed } 

и поворачивая fixed и relative вокруг, очевидно, также не работает, потому что fixed будет связано с relative - элемент.

Любые идеи?

И если кто-то задается вопросом, почему мне нужно использовать fixed и не просто пойти с relative: это для прокрутки.

Answer 1

Почему бы не использовать маржу, оставленную на относительном div?

http://jsfiddle.net/q3nQr/1/

HTML

<div id="fixed"></div> 
<div id="relative"></div> 

CSS

#fixed { position: fixed; width: 60px; height:100px; background: red; } 

#relative { position: relative; width: 300px;height:1000px; background: green; margin-left:65px; } 

UPDATE

Посмотрите на w3 спецификации для статического позиционирования (только прочитать первые два абзаца) ,

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

Абсолютно позиционированные элементы удаляются полностью из документа потока. Это означает, что они не оказывают никакого влияния на их родительский элемент или на элементы, которые происходят после них в исходном коде. Таким образом, абсолютно позиционированный элемент будет перекрывать другое содержимое , если вы не предпримете действия для его предотвращения. Иногда, конечно, это совпадение - это именно то, что вы хотите, но вы должны знать об этом, чтобы убедитесь, что вы получаете макет, который хотите!

Фиксированное позиционирование - это действительно просто специализированная форма абсолютного позиционирования ; элементы с фиксированным позиционированием фиксированы относительно окна просмотра/браузера , а не содержащего его элемента; даже если прокручивается страница, они остаются в том же положении внутри в окне браузера.

Это означает, что элементы с фиксированным или абсолютным положением не связаны ни с какими-либо другими элементами документа, это означает, что они не могут влиять на ширину другого элемента. Если ширина статического элемента неизвестна, я думаю, вам нужно будет манипулировать DOM с помощью javascript; что-то простое (jquery, не проверено):

var staticwidth = $("#static").width(); 
$("#relative").css('margin-left', staticwidth + 'px');