Фиксированное положение Div внутри другого Div

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

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

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

Спасибо

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 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/

Ответ 4

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

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

Чтобы избежать этих решений для взлома, используйте нижеприведенное решение "flex".

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