CSS: position:fixed в положении: фиксированный
К сожалению, нет «предыдущего» селектора, но вы можете , возможно, получить тот же эффект, используя позиционирование (например, float right). Это зависит от того, что вы пытаетесь сделать.
В моем случае я хотел получить первую 5-звездочную рейтинговую систему CSS. Мне нужно было бы покрасить (или поменять значок) предыдущих звезд. Если плавать каждый элемент вправо, я по сути получаю тот же эффект (html для звезд, таким образом, должен быть записан «назад»).
Я использую FontAwesome в этом примере и заменяю между юникодами fa -star-o и fa-star http://fortawesome.github.io/Font-Awesome/
CSS:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* set all stars to 'empty star' */
.stars-container {
display: inline-block;
}
/* set all stars to 'empty star' */
.stars-container .star {
float: right;
display: inline-block;
padding: 2px;
color: orange;
cursor: pointer;
}
.stars-container .star:before {
content: "\f006"; /* fontAwesome empty star code */
}
/* set hovered star to 'filled star' */
.star:hover:before{
content: "\f005"; /* fontAwesome filled star code */
}
/* set all stars after hovered to'filled star'
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
content: "\f005"; /* fontAwesome filled star code */
}
HTML: (40)
4 ответа
Крепление и позиционирование - это две разные вещи. Они позиционируются так же, как и абсолютно позиционированные элементы: относительно их содержащего блока . Но в отличие от абсолютно позиционированных элементов, они остаются фиксированными в этой позиции относительно области просмотра (т.е. они не перемещаются при прокрутке):
http://www.w3.org/TR/CSS2/visuren.html # propdef-position
Положение бокса вычисляется в соответствии с «абсолютной» моделью, но, кроме того, бокс фиксируется относительно некоторой ссылки.
Позиционирование
Определение содержащего блока говорит:
Если элемент имеет 'position: fixed', содержащий блок устанавливается окном просмотра в случае непрерывного носителя (...)
и
Если элемент имеет 'position: абсолютный ', содержащий блок устанавливается ближайшим предком с 'положением' 'абсолютным', 'относительным' или 'фиксированным' (...)
, что предполагает, что хотя их алгоритм позиционирования одинаков (они оба позиционируются относительно их содержащего блока), содержащий блок для фиксированных элементов всегда является окном просмотра, в отличие от абсолютно позиционированных элементов, поэтому они должны располагаться относительно , что , а не относительно каких-либо абсолютно или фиксированных элементов.
И это действительно так. Например, если вы добавите top: 20px к .fixed , оба div будут расположены на расстоянии 20 пикселей от верха области просмотра. Вложенный фиксированный div не располагается на 20 пикселей вниз от верха своего родителя.
Причина, по которой вы '
Короткий Ответ:
, если у Вас есть элемент с возможностью прокрутки с фиксированной позицией (модальное, например), и Вы хотите сделать один из childs зафиксированным также (модальная близкая кнопка, например), вот решение: можно сделать элемент без возможности прокрутки, и вместо этого создать ребенка в нем и сделать его с возможностью прокрутки (модальное содержание, например). этим путем можно подать заявку position: absolute к ребенку, Вы хотите, чтобы это было зафиксировано (модальная близкая кнопка, например), вместо position: fixed.
Длинный Ответ:
В моем случае, я имел display: fixed Модальный и подал заявку overflow: auto к нему для создания его с возможностью прокрутки. затем я хотел сделать близкое Вложение кнопки display: fixed.
display: fixed, работал над хромом, но не в Firefox. таким образом, я изменил свою структуру, я удалил overflow: auto из Модального для создания ее без возможности прокрутки, и вместо этого сделал модальное содержание с возможностью прокрутки. и также добавил position: absolute для закрытия кнопки.
Я не думаю, что это действительно намерение. Все объекты с фиксированным позиционированием позиционируются относительно окна, если у вас есть фиксированный дочерний элемент другого фиксированного, что вы хотите, чтобы произошло? Вы можете легко дублировать поведение, не просто размещая оба фиксированных элемента по отдельности или используя другое положение для изменения положения дочернего элемента в фиксированном элементе. : D
Я не думаю, что есть что-то большее, чем то, что говорит w3c:
Создает абсолютно позиционированный элемент, расположенный относительно окно браузера. Положение элемента указывается с помощью "слева", "сверху", свойства "right" и "bottom"
Итак, если вы избавитесь от этого "padding: 40px;" вы получите 2 элемента - 1 над другим.
Такой же эффект, как если бы вы расположили оба элемента абсолютно вверху: 0 слева: 0 с тем же родителем (телом).