Сверху / снизу / слева / справа - CSS-хитрости

Anonim

В top, bottom, leftи rightсвойства используются с позицией , чтобы установить размещение элемента. Они влияют только на позиционированные элементы, то есть элементы с positionлюбым свойством, отличным от static. Так , например: relative, absolute, fixed, или sticky.

div ( : || || auto || inherit; )

Вы можете использовать его, например, чтобы переместить значок на место:

button .icon ( position: relative; top: 1px; )

Или поместите специальный элемент внутри контейнера.

.container ( position: relative; ) .container header ( position: absolute; top: 0; )

Значение top, bottom, leftи rightможет быть любым из следующих:

  • любая допустимая длина CSS
  • процент от высоты содержащего элемента (для topи bottom) или ширины (для leftи right)
  • auto
  • inherit

Элемент обычно будет двигаться от заданной стороны, когда его значение положительное, и к нему, когда значение отрицательное. В приведенном ниже примере положительная длина для topперемещает элемент вниз (от верха), а отрицательная длина для topперемещает элемент вверх (вверх):

См.
Верхнюю часть пера : положительные и отрицательные значения Мацуко Фридланда (@missmatsuko)
на CodePen.

Позиция

Размещение элемента со значением для top, bottom, left, или в rightзависимости от его значения для position. Давайте посмотрим, что происходит, когда мы устанавливаем одинаковое значение для topэлементов с разными значениями для position.

static

topСвойство не имеет никакого влияния на unpositioned элементы (элементы с positionустановленным в static). Так позиционируются элементы по умолчанию. Вы можете использовать position: static;как один из методов отмены воздействия topна элемент.

relative

Если topдля элемента positionустановлено значение relative, равное значению, элемент будет перемещаться вверх или вниз относительно своего исходного положения в документе.

См.
Верхнюю часть пера : родственник Мацуко Фридланда (@missmatsuko)
на CodePen.

absolute

Когда topдля элемента positionустановлено значение absolute, элемент будет перемещаться вверх или вниз относительно своего ближайшего позиционированного предка (или документа, если позиционированных предков нет).

В этой демонстрации розовый прямоугольник слева расположен на 50 пикселей вниз от верхнего края страницы, потому что он не имеет позиционированных элементов-предков. Розовое поле справа расположено 50px вниз от верхней части своего родителя, поскольку родитель имеет positionв relative.

См.
Верхнюю часть пера : absolute от Мацуко Фридланда (@missmatsuko)
на CodePen.

fixed

Если topдля элемента positionустановлено значение set to fixed, элемент будет перемещаться вверх или вниз по отношению к области просмотра браузера.

См.
Верхнюю часть пера : исправлено с помощью CSS-Tricks (@ css-tricks)
на CodePen.

На первый взгляд может показаться, что между absoluteи нет разницы fixed. Разницу можно увидеть, если сравнить их на странице, на которой достаточно содержимого для прокрутки. При прокрутке вниз fixedэлемент позиции всегда находится в поле зрения, а absoluteэлемент позиции прокручивается.

См.
Прокрутку пера : фиксированная и абсолютная с помощью CSS-Tricks (@ css-tricks)
на CodePen.

sticky

Когда topдля элемента positionустановлено значение sticky, элемент будет перемещаться вверх или вниз по отношению к ближайшему предку с полем прокрутки (или области просмотра, если ни один из предков не имеет ползунка), ограниченный пределами содержащего его элемента.

Установка topдля stickyпозиционированного элемента не имеет большого значения, если его контейнер не выше, чем он есть, и у вас достаточно содержимого для прокрутки. Как и в случае с fixed, элемент будет оставаться в поле зрения при прокрутке. В отличие от fixedэтого элемент выпадет из поля зрения, когда достигнет краев содержащего его элемента.

См.
Прокрутка пера : фиксированная и закрепленная с помощью CSS-Tricks (@ css-tricks)
на CodePen.

Попался

Установка противоположных сторон

Вы можете установить значение для каждого из top, bottom, leftи rightна одном элементе. Когда вы устанавливаете значения для противоположных сторон ( topи bottom, или leftи right), результат может не всегда быть таким, как вы ожидаете.

В большинстве случаев bottomигнорируется, если topон уже установлен, и rightигнорируется, если leftон уже установлен. Если для направления установлено значение rtl(справа налево), leftигнорируется вместо right. Чтобы каждое значение имело эффект, элемент должен иметь positionзначение absoluteили fixedи иметь heightзначение auto(по умолчанию).

В этом примере, мы установили top, bottom, leftи rightв `20px`, и ожидать , что каждая сторона внутренней коробки , чтобы быть 20px от сторон внешней коробки:

См. Раздел
Настройка пера сверху, снизу, слева и справа от CSS-Tricks (@ css-tricks)
на CodePen.

Когда фиксировано не относительно области просмотра

Элементы, для которых positionустановлено значение fixed, не всегда располагаются по отношению к области просмотра. Он будет расположен по отношению к своим ближайшим предком с transform, perspectiveили filterнабор свойств к чему - либо другому , чем none, если таковой существует.

Добавление или удаление места

Если вы разместили элемент и обнаружили, что теперь пустое место или недостаточно места там, где вы ожидали, это может иметь отношение к тому, находится ли элемент в потоке документа или вне его.

Когда элемент удаляется из потока документа, это означает, что пространство, которое он изначально занимал на странице, исчезает. Это тот случай, когда элемент позиционируется absoluteили fixed. В этом примере контейнер, содержащий абсолютно позиционированный элемент, свернулся, поскольку абсолютно позиционированный элемент был удален из потока документа:

См.
Поток документов Pen от Мацуко Фридланда (@missmatsuko)
на CodePen.

Поддержка браузера

Вы можете взглянуть на это topсвойство , но кроссбраузерности здесь нет . Используйте по желанию.