жидкости фиксированное положение

Question

Представьте:

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 

Где:

• .outer является частью структуры столбца, а его ширина является процентиля и, следовательно, жидкость.
• .inner представляет собой элемент положения fixed, который должен заполнять 100% шириной элемент .outer. Однако его положение по вертикали остается неизменным, поэтому fixed.

Я пытался реализовать эту схему с помощью следующего CSS:

.outer { 
    position: relative; 
    width: %; 
} 
.inner { 
    position: fixed; 
    width: 100%; 
} 

Однако .inner не вычислить его ширину в процентах от его relative родителя. Вместо этого он заполняет всю ширину окна/документа. Попытка любых свойств left или right приводит к тем же свойствам игнорирования родителя.

Есть ли способ обойти это?

Answer 1

Вы можете взглянуть на это jsfiddle, что я сделал, что иллюстрирует исправление вашей проблемы, вы можете использовать этот код точно так, как он делает то, что вы хотите.

Answer 2

position: fixed всегда относится к окну/браузеру, поэтому его нельзя использовать для решения вашей проблемы. Фиксированное позиционирование удаляет элемент из естественного порядка DOM и, следовательно, больше не остается в вашем внешнем div, поэтому он берет полную ширину браузера, а не вашего контейнера. Что вам нужно использовать, это position: absolute to place .inner относительно .outer. Вы сможете разместить свой элемент так же, как и его ширина, в div .outer.

Answer 3

position:fixed всегда относится к окну просмотра/браузера, а не к предкам.

Answer 4

Как насчет использования примерно такого fiddle?

.outer { 
    width: 20%; 
    height: 1200px; 
    margin-left: 5%; 
    float: left; 
} 
.inner { 
    height: 200px; 
    position: fixed; 
    top: 0; 
    background: orange; 
    right: 75%; 
    left: 5%; 
} 

Answer 5

.outer { 
    position: relative; 
    width: %; 
} 
.inner { 
    position: fixed; 
    width: inherit; 
} 

Это должно сделать трюк.

Answer 6

Используйте это:

.inner { положение: фиксированный; Слева: 0; правый: 0;

Answer 7

Фиксированные элементы принимают только абсолютные значения как ширину. Если ваш родительский контейнер является текучим (ширина в процентах), вам необходимо установить ширину фиксированного элемента динамически. Вам нужно получить ширину контейнера для обертывания и установить его на липкий элемент.

CSS

.outer {width: 25%;} 
.inner {position: fixed;} 

JS

var fixedWidth = $('.outer').css('width'); 
$('.inner').css('width', fixedWidth); 

Кроме того, вы можете добавить прослушиватель событий в случае, если окно изменяет размер.

JS

window.addEventListener('resize', resize); 
function resize() { 
    var fixedWidth = $('.outer').css('width'); 
    $('.inner').css('width', fixedWidth); 
}