Элемент положения зафиксирован вертикально, абсолютный горизонтально
Вот то, что я пытаюсь выполнить:
Мне нужна кнопка, которая расположена определенное расстояние от правой стороны отделения, и всегда является тем же самым расстоянием от стороны отделения, неважно, размер области просмотра, но прокрутит с окном.
Таким образом, это - x пиксели от правой стороны отделения в любом случае, но y пиксели от вершины порта представления в любом случае.
Действительно ли это возможно?
1 ответ
Расположить фиксированный элемент горизонтально на основе другого элемента
(Примечание об отказе от ответственности: Решение, предложенное здесь, технически не является "абсолютно горизонтальным", как указано в заголовке вопроса, но достигает того, что изначально хотел ОП, элемент с фиксированной позицией должен быть на расстоянии 'X' от правого края другого элемента, но фиксирован в своей вертикальной прокрутке.)
Я люблю такие типы css-задач. В качестве доказательства концепции, да, вы можете получить то, что хотите. Возможно, вам придется подстроить некоторые вещи под свои нужды, но вот пример html и css, который прошел FireFox, IE8 и IE7 (IE6, конечно, не имеет position: fixed).
HTML:
<body>
<div class="inflow">
<div class="positioner"><!-- may not be needed: see notes below-->
<div class="fixed"></div>
</div>
</div>
</body>
CSS (границы и все размеры для демонстрации):
div.inflow {
width: 200px;
height: 1000px;
border: 1px solid blue;
float: right;
position: relative;
margin-right: 100px;
}
div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/
div.fixed {
width: 80px;
border: 1px solid red;
height: 100px;
position: fixed;
top: 60px;
margin-left: 15px;
}
Главное - не устанавливать left или right вообще для горизонтали в div.fixed, а использовать два оберточных div для установки горизонтальной позиции. div.positioner не нужен если div.inflow имеет фиксированную ширину, так как левое поле div.fixed может быть установлено на известную ширину контейнера. Однако если вы хотите, чтобы контейнер имел ширину в процентах, то вам понадобится div.positioner, чтобы сначала подтолкнуть div.fixed к правой стороне div.inflow.
Edit: В качестве интересного примечания, когда я установил overflow: hidden (если это необходимо) на div.inflow, это не оказало никакого эффекта на то, что div с фиксированной позицией находится вне границ другого. Очевидно, фиксированной позиции достаточно, чтобы вывести его из контекста содержащего div для overflow.