it-swarm.com.ru

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

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

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

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

Спасибо

14
Sbml

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

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

15
Guffa

Вам определенно не нужен 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/

5
George Katsanos

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

.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
Vishal Vaishya

Правильное решение - «гибкий». Прошло 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>
0
spyder1329