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

enter image description here

На самом деле я хочу добиться:

enter image description here

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

enter image description here

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

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

enter image description here

Итак, я попытался заставить этот второй относительный div работать с псевдоэлементами :after или :before. Это не совсем работает

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

Это как-то перепуталось, потому что сам элемент

div { position: fixed }

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

Любые идеи?

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

0
MMachinegun 16 Мар 2013 в 01:13

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

ОБНОВЛЕНИЕ

Взгляните на спецификацию w3 для статического позиционирования (просто прочтите первые два абзаца).

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

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

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

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

var staticwidth = $("#static").width();
$("#relative").css('margin-left', staticwidth + 'px');
2
superUntitled 17 Мар 2013 в 02:16
Хорошая точка зрения! Это было бы возможным решением, единственная проблема в том, что мне пришлось бы манипулировать полем с помощью javascript, если ширина #fixed меняется. С поведением relative вместо поведения fixed + маржа это будет соответствовать автоматически. Мой '# relative'-div заполняет оставшееся пространство.
 – 
MMachinegun
16 Мар 2013 в 01:39
Обновил свой ответ, чтобы ответить на этот комментарий. Боюсь, вам нужен статический элемент, чтобы повлиять на ширину другого элемента, чего он не может (насколько я знаю).
 – 
superUntitled
17 Мар 2013 в 02:22
Спасибо за ваше обновление! то, что я пробовал сейчас, следующее: <div id="relative"><div id="fixed"></div></div> Я установил #fixed width: inherit. на #relative я устанавливаю и меняю width. #fixed автоматически берет на себя тот же width, и когда я прокручиваю #relative, прокручивается, но мой #fixed остается, который все время накладывается на #relative. Так что мне удается «привязать» свои div друг к другу, что дает мне желаемый результат без javascript: D. в любом случае спасибо, ваше предложение было достаточно близким и помогло мне придумать это. +1
 – 
MMachinegun
17 Мар 2013 в 02:54