Я нахожу, что, когда я фиксирую элемент фиксированным, не имеет значения, является ли родитель относительным или нет, он будет фиксирован относительно окна?
CSS
#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; }
#feedback { position: fixed; right: 0; top: 120px; }
HTML
<div id="wrapper">
...
<a id="feedback" href="#">Feedback</a>
</div>
Позвольте мне дать ответы на оба возможных вопроса. Обратите внимание, что ваше существующее название (и оригинальное сообщение) задает вопрос, отличный от того, что вы ищете в своем редактировании и последующем комментарии.
Чтобы поместить элемент "fixed" относительно родительского элемента, вы хотите, чтобы position:absolute по дочернему элементу, и любой режим позиции, отличный от значения по умолчанию или статический на родительском элементе.
Например:
#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }
Это будет позиционировать элемент childDiv 50 пикселей влево и на 20 пикселей относительно позиции parentDiv.
Чтобы поместить элемент "фиксированный" относительно окна, вы хотите, чтобы position:fixed, и может использовать top: left: right: и bottom: для размещения по своему усмотрению.
Например:
#yourDiv { position:fixed; bottom:40px; right:40px; }
Это позиционирует yourDiv фиксированный относительно окна веб-браузера, 40 пикселей от нижнего края и 40 пикселей от правого края.
Спецификация CSS требует, чтобы position:fixed была привязана к окну просмотра, а не содержащему позиционированный элемент.
Если вы должны указать свои координаты относительно родителя, вам придется сначала использовать JavaScript, чтобы сначала найти родительскую позицию относительно окна просмотра, а затем установить дочернюю (фиксированную) позицию элемента соответственно.
АЛЬТЕРНАТИВА: Некоторые браузеры имеют sticky поддержку CSS, которая ограничивает элемент, который будет размещен как в своем контейнере, так и в окне просмотра. За сообщение коммита:
sticky... ограничивает элемент, который должен быть расположен внутри пересечения его контейнера и окна просмотра.Элемент с липкой позицией ведет себя как позиция: относительная (пространство зарезервировано для нее в потоке), но со смещением, которое определяется липким положением. Изменен isInFlowPositioned(), чтобы покрыть относительный и липкий.
В некоторых случаях это может быть полезно в зависимости от ваших целей дизайна. В настоящее время он является рабочим проектом и имеет достойную поддержку, помимо элементов таблицы. position: sticky в Safari все еще нужен префикс -webkit.
См. Caniuse для актуальной статистики в браузере.
сначала установите position: fixed и left: 50%, а во-вторых - теперь ваш старт - это центр, и вы можете установить новую позицию с полем.
В современных браузерах теперь возможно позиционировать элемент, зафиксированный относительно его контейнера. Элемент, имеющий свойство transform, действует как область просмотра для любого из его дочерних элементов с фиксированным положением.
Или, как говорит модуль CSS Transforms:
Для элементов, макет которых определяется блочной моделью CSS, любое значение, отличное от none, для свойства transform также заставляет элемент устанавливать содержащий блок для всех потомков. Его поле заполнения будет использоваться для компоновки всех его потомков абсолютного положения, потомков с фиксированным положением и вложенных фоновых вложений потомков.
.context {
width: 300px;
height: 250px;
margin: 100px;
transform: translateZ(0);
}
.viewport {
width: 100%;
height: 100%;
border: 1px solid black;
overflow: scroll;
}
.centered {
position: fixed;
left: 50%;
bottom: 15px;
transform: translateX(-50%);
}<div class="context">
<div class="viewport">
<div class="canvas">
<table>
<tr>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
<button class="centered">OK</button>
</div>
</div>
</div>Я знаю, что это супер старый, но после того, как я не нашел (чистый CSS) ответ, который я искал, я придумал это решение (частично абстрагированное от medium.com) и подумал, что это может помочь другим, которые хотят сделать то же самое.
Если вы комбинируете ответы @DuckMaestro, вы можете поместить элемент, фиксированный относительно родителя (фактически бабушки и дедушки). Используйте position: absolute; для размещения элемента внутри родителя с position: relative;, а затем position: fixed; для элемента внутри элемента с абсолютным расположением:
<div class="relative">
<div class="absolute">
<a class="fixed-feedback">This element will be fixed</a>
</div>
</div>
.relative {
margin: 0 auto;
position: relative;
width: 300px;
}
.absolute {
position: absolute;
right: 0;
top: 0;
width: 50px;
}
.fixed-feedback {
position: fixed;
top: 120px;
width: 50px;
}
Как и @JonAdams, определение position: fixed требует, чтобы элемент располагался относительно окна просмотра, но вы можете обойти горизонтальный аспект этого использования с помощью этого решения.
Примечание. Это отличается от установки значения right или left для фиксированного элемента, потому что это приведет к его перемещению по горизонтали при изменении размера окна.
Ниже приведен пример предложения Джона Адамса выше, чтобы исправить div (панель инструментов) в правой части элемента страницы с помощью jQuery. Идея состоит в том, чтобы найти расстояние от правой стороны окна просмотра до правой части элемента страницы и сохранить правую сторону панели инструментов там!
<div id="pageElement"></div>
<div id="toolbar"></div>
#toolbar {
position: fixed;
}
....
function placeOnRightHandEdgeOfElement(toolbar, pageElement) {
$(toolbar).css("right", $(window).scrollLeft() + $(window).width()
- $(pageElement).offset().left
- parseInt($(pageElement).css("borderLeftWidth"),10)
- $(pageElement).width() + "px");
}
$(document).ready(function() {
$(window).resize(function() {
placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
});
$(window).scroll(function () {
placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
});
$("#toolbar").resize();
});
Я знаю, что это более старая должность, но я думаю, что хороший пример того, что пытался сделать Jiew Meng, уже можно найти на этом сайте. Посмотрите меню сбоку, расположенное здесь: https://stackoverflow.com/faq#questions. Глядя на него, не вдаваясь в него слишком глубоко, я могу сказать, что javascript прикрепляет фиксированную позицию, когда прокрутки попадают ниже метки привязки и удаляет фиксированное позиционирование, если прокрутка идет выше того же тега привязки. Надеюсь, это заставит кого-то начать в правильном направлении.
Это старое сообщение, но я оставлю здесь свое решение для javascript на случай, если кому-то это понадобится.
// you only need this function
function sticky( _el ){
_el.parentElement.addEventListener("scroll", function(){
_el.style.transform = "translateY("+this.scrollTop+"px)";
});
}
// how to make it work:
// get the element you want to be sticky
var el = document.querySelector("#blbl > div");
// give the element as argument, done.
sticky(el);#blbl{
position:relative;
height:200px;
overflow: auto;
background: #eee;
}
#blbl > div{
position:absolute;
padding:50px;
top:10px;
left:10px;
background: #f00
}<div id="blbl" >
<div><!-- sticky div --></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>Это решение работает для меня! Ссылка на оригинальный подробный ответ: fooobar.com/questions/15304/...
CSS:
.level1 {
position: relative;
}
.level2 {
position: absolute;
}
.level3 {
position: fixed;
/* Do not set top / left! */
}
HTML:
<div class='level1'>
<div class='level2'>
<div class='level3'>
Content
</div>
</div>
</div>
С несколькими divs мне удалось получить фиксированные-y и absolute-x div. В моем случае мне нужен div на левой и правой сторонах, выровненный по центру с шириной div 1180px.
<div class="parentdiv" style="
background: transparent;
margin: auto;
width: 100%;
max-width: 1220px;
height: 10px;
text-align: center;">
<div style="
position: fixed;
width: 100%;
max-width: 1220px;">
<div style="
position: absolute;
background: black;
height: 20px;
width: 20px;
left: 0;">
</div>
<div style="
width: 20px;
height: 20px;
background: blue;
position: absolute;
right: 0;">
</div>
</div>
</div>