Делаем div фиксированным по вертикали, но приклеенным к границе страницы по горизонтали - PullRequest
Новая
       32

Делаем div фиксированным по вертикали, но приклеенным к границе страницы по горизонтали

3 голосов
/ 28 мая 2010

Можете ли вы перейти на: http://www.binarymark.com/Products/ColorPickerPro/default.aspx и отметить макет страницы.

То, что я хочу сделать, это приклеить или «склеить» какой-нибудь маленький div к правой стороне страницы, чтобы он находился за пределами правого фрейма страницы.

Однако по вертикали я хочу, чтобы div был прикреплен к окну, независимо от того, сколько страниц прокручивается, он должен оставаться фиксированным 300px от верхнего края окна.

Вот как это должно выглядеть http://www.binarymark.com/layexp.png

Можете ли вы помочь мне, пожалуйста?

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

Спасибо.

1 Ответ

7 голосов
/ 28 мая 2010 
position: fixed;
right: 0;
top: 50%;

Редактировать: попробуйте вставить этот div в качестве первого потомка вашего <div id="content">...

<div class="right-tab">TEXT</div>

CSS: 

.right-tab {
    position: fixed;
    top: 50%;
    width: 1100px;
    background-color: red;
    text-align: right;
}

Это должно помочь вам начать. Ширина будет указывать, насколько далеко от содержимого вы хотите показывать свою вкладку (так что в этом случае она составляет около 100 пикселей). Красный фон как раз для того, чтобы вам было легче видеть div.

...