Горе / долу / вляво / вдясно - 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ще премести елемента нагоре (към върха):

Вижте Pen
Top: положителни и отрицателни стойности от Matsuko Friedland (@missmatsuko)
на CodePen.

Позиция

Поставянето на елемент със стойност за top, bottom, left, или rightзависи от неговата стойност за position. Нека да разгледаме какво се случва, когато зададем една и съща стойност за topелементи с различни стойности за position.

static

В topимота няма никакъв ефект върху unpositioned елементи (елементи с positionкомплект за static). По този начин елементите са позиционирани по подразбиране. Можете да използвате position: static;като един метод, за да отмените ефекта от topвърху елемент.

relative

Когато topе зададен на елемент с positionзададено relative, елементът ще се движи нагоре или надолу спрямо първоначалното му разположение в документа.

Вижте Pen
Top: сродник от Matsuko Friedland (@missmatsuko)
на CodePen.

absolute

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

В тази демонстрация розовото поле вляво е позиционирано на 50 пиксела надолу от горната част на страницата, защото няма позиционирани предшественици. Розовият полето вдясно е позициониран 50px надолу от върха на своята майка, защото родителят има positionна relative.

Вижте Pen
Top: absolute от Matsuko Friedland (@missmatsuko)
в CodePen.

fixed

Когато topе зададен за елемент с positionнастройка fixed, елементът ще се движи нагоре или надолу по отношение на прозореца за преглед на браузъра.

Вижте Pen
Top: фиксиран от CSS-трикове (@ css-tricks)
на CodePen.

На пръв поглед може да изглежда, че няма разлика между absoluteи fixed. Разликата може да се види, когато ги сравните на страница, която има достатъчно съдържание за превъртане. Докато превъртате надолу, fixedпозиционният елемент винаги е в преглед, докато absoluteпозиционният елемент се превърта.

Вижте
Скролиране на писалката : фиксирано спрямо абсолютно от CSS-трикове (@ css-трикове)
на CodePen.

sticky

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

Задаването topна stickyпозициониран елемент не прави много, освен ако контейнерът му е по-висок от него и имате достатъчно съдържание, за да превъртате. Както при fixed, елементът ще остане в полезрението, докато превъртате. За разлика от това fixed, елементът ще изпадне от полезрението, след като достигне ръбовете на съдържащия го елемент.

Вижте
Скролиране на писалката : фиксирано срещу лепкаво от CSS-трикове (@ css-трикове)
на 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-трикове (@ css-трикове)
на CodePen.

Когато е фиксиран, не е спрямо прозореца за гледане

Елементите с positionнастройка fixedне винаги са позиционирани по отношение на прозореца за гледане. Тя ще бъде разположена в сравнение с най-близките си предшественик с transform, perspectiveили filterнабор имот за нищо друго, освен none, ако има такава.

Добавяне или премахване на пространство

Ако сте позиционирали елемент и сте установили, че сега има празно място или няма достатъчно място, където сте очаквали, може да е свързано с това дали елементът е в или извън потока на документа.

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

Вижте Pen
Document flow от Matsuko Friedland (@missmatsuko)
на CodePen.

Поддръжка на браузър

Можете да надникнете, но няма притеснения от различни браузъри за topимота. Използвайте по желание.