Позиція і розміри елемента в css

Позиція і розміри елемента

  • position - задає спосіб розташування елемента, може приймати одне з наступних значень:
    • fixed - координати щодо вікна браузера;
    • relative - координати щодо щодо батьківського елементу;
    • absolute - координати щодо першого батьківського елемента з позиціонуванням відмінним від static;
    • static - позиціонування звичайним чином, значення за замовчуванням.
  • left - x координата верхнього лівого кута елемента;
  • top - y координата верхнього лівого кута елемента;
  • right - x координата нижнього правого кута елемента;
  • bottom - y координата нижнього правого кута елемента;
  • z-index - z координата елемента. Це дозволяє накладати елементи один на одного, створювати шари. (Приклад накладення).

позиція через вирівнювання

  • text-align - горизонтальне вирівнювання вмісту. Можливі такі значення:
    • justify - по ширині;
    • left - по лівому краю;
    • right - вправо;
    • center - по центру по горизонталі;
  • vertical-align - вертикальне вирівнювання вмісту. Чисельне значення вказує на скільки підняти / опустити елемент щодо поточної позиції. Також доступні строкові значення:
    • top - наверх;
    • bottom - вниз;
    • middle - в середину.

У Мозіль і опері вирівняти об'єкт по центру можна наступним чином

Якщо ширина відома то вирівняти по центру можна приблизно так

  • width - ширина елемента;
  • height - висота елемента;
  • min-width, max-width - мінімальна і максимальна ширина елемента;
  • min-height, max-height - мінімальна і максимальна висота елемента.

коли вміст більше елемента

  • overflow - визначає поведінку, вміст перекриває бокс елемента. Можливі такі значення:
    • auto;
    • hidden - приховати;
    • scroll - прокручувати;
    • visible - відображати;
    • inherit - успадковувати значення.
  • clip - дозволяє вказати видимий прямокутник дочірнього елемента, коли його розміри більше батьківського елемента при абсолютному позиціонуванні. Зазвичай використовується з зображеннями. Стиль не працює якщо визначено overflow: visible. Прямокутник вказується як rect (верх, право, низ, ліво).

Схожі статті