положение div с фиксированным полем в прокручиваемом контенте - PullRequest
Новая
       45

положение div с фиксированным полем в прокручиваемом контенте

1 голос
/ 08 декабря 2011

Привет

Посмотрите, пожалуйста, на мое jsfiddle .

Содержимое внутреннего элемента div прокручивается.

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

Его следует прокручивать вместе с позицией.

У вас есть представление о том, как мне добиться этого эффекта?

Ответы [ 3 ]

3 голосов
/ 08 декабря 2011

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

Когда вы назначаете абсолютную позицию классу "symb", вы располагаете их относительно документа, а не их родителя.

Просто добавив "position: относительный;" ваш элемент div.tl установит родительский div как позиционированный, не перемещая его, а элементы "symb" будут действовать так, как я думаю, вы ожидаете от них.

Ваше новое определение .tl должно быть: 

.tl {
    width: 500x;
    height: 80px;
    background-color:grey;
    position: relative;
}

Кроме того, я предполагаю, что у вас есть необходимость позиционировать их абсолютно. Вы можете добиться аналогичных результатов, просто удалив часть "position: absolute" из вашего определения .symb.

Вы устанавливаете поле, а не позицию, поэтому вам не нужно вообще беспокоиться о позиционировании в вашем примере.

0 голосов
/ 08 декабря 2011

Использование 

position: relative;

Не 

position: absolute;

Просто попробуйте следующий CSS: 

.box .symb {
    position: relative;
    float: left;
    position: inline-block;
    width: 5px;
    height: 5px;
    background-color: #cccccc;
    z-index: 999;
    margin-top: 10px;
}
0 голосов
/ 08 декабря 2011

Я не уверен, что тебе нужно. У вас была ошибка в вашем последнем "symb" - вы пропустили "p" в "px". Попробуйте это? 

<div class ="outer">
    <div class="inner">
            <div class="tl">
                <div class="box" style="width: 315px;">
                    <div class="symb" style="margin-left: 0px;"></div>
                    <div class="symb" style="margin-left: 15px;"></div>
                    <div class="symb" style="margin-left: 20px;"></div>
                </div>
        </div>
    </div>
</div>

.outer {
    width:50%;
}
.inner {
    overflow-x:scroll;
}
.tl {
    width: 500x;
    height: 80px;
    background-color:grey;
}
.box {
    float: left;
    height: 61px;
}

.box .symb {
    float:left;
    width: 5px;
    height: 5px;
    background-color: #cccccc;
    z-index: 999;
    margin-top: 10px;
}
...