Зверху / знизу / ліворуч / праворуч - 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: позитивні та негативні значення Мацуко Фрідланд (@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.

Дивіться Pen
Top: absolute від Matsuko Friedland (@missmatsuko)
на CodePen.

fixed

Коли topдля елемента positionвстановлено значення fixed, значення буде переміщуватися вгору або вниз по відношенню до області перегляду браузера.

Див. Pen
Top: виправлено 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власності немає жодних проблем із переглядачами . Використовуйте за бажанням.