Позиция фиксирована в контейнере, а не в браузере/окне просмотра

Question

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

position:fixed 

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

Смотреть это fiddle demo

Таким образом, цель здесь, чтобы исправить положение заголовка, но фиксировано относительно его родителя контейнера. В этой скрипке, вы можете увидеть, что я закомментировать блок CSS:

.container{ 

    /*-webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    transform: translateZ(0);*/ 

    -webkit-transform: none; 
    -moz-transform: none; 
    -ms-transform: none; 
    transform: none; 
} 

Если вы замените текущий блок CSS (с преобразованием установлено ни) с одной с translateZ, заголовок получит позиционированный в его родительском контейнере, но больше не фиксируется.

Кто-нибудь знает, как это решить? Предпочтительным решением будет только CSS/HTML и избежать JS, но если ничего другого, то JS, конечно же, мне нужно сходить!

Answer 1

CSS не может это сделать сам по себе.

Position: fixed работает в отношении видового экрана, а не содержит элемент.

Я видел an attempt to solve this problem, используя свойство CSS3 transform, но (как вы отметили в своем комментарии к моему первому ответу), похоже, что это не работает.

Насколько я понимаю, вы не можете использовать какую-либо клиентскую библиотеку, но это единственное решение, доступное, насколько мне известно. Для вас и других, которые могут когда-нибудь понадобиться, вот решение, которое работает. В нем используется немного jQuery:

Позиционирование элемента внутри другого элемента с позиционированным элементом, закрепленным вдоль осей x и y (то есть положение фиксировано горизонтально и вертикально).

http://jsfiddle.net/8086p69z/8/

HTML

<div class="moving-article"> 

    <div class="container"> 

    <header class="fixed-header">FIXED HEADER</header> 

     <ul> 
     <li>SCROLL</li> 
     <li>SCROLL</li> 
     <li>SCROLL</li> 
     </ul>  

    </div> 

</div> 

CSS (соответствующий раздел)

.moving-article { 
    height: 150px; 
    width: 75%; 
    overflow-x: scroll;  
} 

.fixed-header { 
    background: rgba(0,0,0,0.5); 
    width: 50%; 
    text-align: center; 
    line-height: 40px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.container{ 
    width: 1000px; 
} 

JQuery

Answer 2

установите положение заголовка в «абсолютное», и это родительский контейнер (который вы хотите, чтобы он был относительным) к «относительному», и установил его, чтобы он придерживался вершины родителя с помощью «top: 0»

CSS:

.container { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; 
} 

Answer 3

Чтобы сохранить элемент в неподвижном родителе не может быть сделан с position: fixed, потому что position: fixed принимает элемент out of the flow и, следовательно, не имеет родителя. Он позиционирует себя относительно окна просмотра.

Для достижения вашей цели, сохраняя при этом все простоту и эффективность, вы можете рассмотреть Tether, «клиентскую библиотеку, чтобы элементы с абсолютно позиционируемыми элементами были эффективно прикреплены к элементам страницы».

Надеюсь, это поможет. Удачи.