Фиксированный Div внутри другого Div

Question

У меня есть один div position:fixed;, и моя проблема в том, что фиксированная позиция относительно всей страницы, мне нужно, чтобы фиксированный div оставался внутри другого div, который центрируется на странице с полями в автоматическом режиме. (Поэтому, когда я прокручиваювниз по странице я хочу, чтобы div всегда находился в одной и той же позиции).

Я использую плагин jquery StickyScroll , но не могу заставить его работать в Internet Explorer.

Решение может быть в jquery / javascript, css.

Спасибо

Answer 1

Тогда вам не нужно фиксированное позиционирование, но абсолютное позиционирование.

Установите position: absolute; на элемент, который вы хотите позиционировать. Установите position: relative; в центрированном элементе div, чтобы он стал слоем, внутри которого можно размещать элементы.

Answer 2

Вам определенно не нужен jQuery или JavaScript для достижения этой цели.Вот что вам нужно: HTML:

<div class="outer">
    <div class="inner">some text here
    </div>
</div>

CSS:

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
}
.inner {
    width:50px;
    border:1px solid white;
    position:fixed;
}

Посмотрите на это: http://jsfiddle.net/2mYQe/1/

Answer 3

Немного изменившийся код Джорджа Кацаноса может быть полезен для некоторых.

.outer {
    width:200px;
    height:300px;
    background-color:red;
    margin:0 auto;
    overflow:auto;    
}

.inner {
    width:182px;
    border:1px solid white;
    position:absolute;
    background-color:buttonface;
}

Образец в: http://jsfiddle.net/2mYQe/480/

Answer 4

Правильное решение - «гибкий». Прошло 3 года с момента публикации, поэтому я предполагаю, что мы можем игнорировать поддержку IE8 в пользу более современных браузеров, поддерживающих это решение.

Как многие здесь отметили, каждое предлагаемое решение сталкивается с проблемами. Из-за того, что первый элемент в области содержимого скрыт от заголовка с абсолютным позиционированием, или из области содержимого, занимающей полную высоту родительского элемента, это означает, что существует риск обрезания нижней части области содержимого, если только вы не вычтете заголовок из его общей высоты. (например, высота: calc (100% - «высота заголовка» px), что означает, что у вас есть жестко запрограммированные значения в вашем CSS ... не хорошо, или полоса прокрутки установлена ​​на родительском уровне, что означает, что заголовок борется за это недвижимый.

Чтобы избежать этих взломанных решений, используйте нижеприведенное «гибкое» решение.

<div style="width: 200px; float: right; border: 1px solid black;
    display: flex; flex-direction: column;">
    <div style="width: 100%;">
        <div style="width: 100%;">
            I'm a header
        </div>
    </div>

    <div style="width: 100%; height: 100%; overflow:auto;">
        <div style="height:900px; background-color:lavender;">content area</div>
    </div>
</div>