Фиксированный объект, привязанный к родительскому

Question

У меня есть фиксированный объект, расположенный в относительно позиционированном родителе. Родитель перемещается по мере прокрутки страницы вниз, и фиксированный объект остается в определенном месте на странице. Проблема в том, что фиксированный объект виден независимо от того, где расположен позиционированный родитель.

Есть ли способ зафиксировать фиксированные объекты для их родителей?

Я искал работу, но я не могу ее найти.

Answer 1

Поскольку фиксированный элемент положения фиксирован относительно видового экрана, а не другой элемент. Поэтому, поскольку окно просмотра не отключает его, переполнение становится неактуальным.

Answer 2

То, о чем вы просите, невозможно по дизайну. попробуйте использовать положение абсолютное вместо фиксированного. Посмотрите на этой таблицу о позиционировании, скопированной из www.w3schools.com:

• статической >> По умолчанию. Элементы визуализации в порядке, как они появляются в потоке документов Избегают »

• абсолют >> Элемент позиционируется относительно его первого позиционированного (не статический) предка элемента Избегают»

• фиксированной >> The элемент позиционируется относительно окна браузера Избегают »

• относительное >> элемент позиционируется относительно его нормального положения, так что„осталось: 20“добавляет 20 пикселей в левое положение элемента Избегают»

• inherit >> Значение Положение свойство наследуется от родительского элемента

Answer 3

Я думаю, что вы ищете, position: absolute вместо фиксированной. Фиксированное положение всегда привязывается к окну просмотра, тогда как абсолютное позиционирование основано на ближайшем расположении предка.

Вот скрипку, который показывает такое поведение: http://jsfiddle.net/8u7aZ/

HTML:

<div id="parent"> 
    Some text. 
    <div id="littleChild"></div> 
</div> 

CSS:

body { 
    height: 1000px; 
} 

#parent { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border: 1px solid #000; 
} 

#littleChild { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    width: 10px; 
    height: 10px; 
    background-color: #000; 
} 

(я только установить высоту тела, чтобы 1000px так, что коробка будет прокручивать и покажите позиционирование.)