Різниця між статичним та відносним розташуванням

У чому різниця між статичним (за замовчуванням) і відносним позиціонуванням у CSS?

Статичне позиціонування - це модель позиціонування за замовчуванням для елементів. Вони відображаються на сторінці, де вони відображались як частина звичайного потоку HTML. Статично розташовані елементи не підкоряються left, top, rightі bottomправила:

Відносне позиціонування дозволяє задати певне зміщення ( left, і topт.д.) , яка є відносно нормального положення елемента в потоці HTML. Отже, якщо у мене є текстове поле всередині, divя можу застосувати відносне позиціонування в текстовому полі, щоб воно відображалося в певному місці відносно того, де воно зазвичай розміщується в межах div:

Існує також абсолютне позиціонування - за допомогою якого ви вказуєте точне розташування елемента відносно всього документа або наступного відносно розташованого елемента далі вгору по дереву елементів :

І коли a position: relativeзастосовується до батьківського елементу в ієрархії:

Зверніть увагу, як наш абсолютно позиційний елемент пов'язаний відносно позиціонованим елементом.

І нарешті це виправлено. Фіксоване позиціонування обмежує елемент до певної позиції у вікні перегляду, яка залишається на місці під час прокрутки:

Ви також можете спостерігати за поведінкою того, що елементи з фіксованим розташуванням не викликають прокручування, оскільки вони не вважаються пов'язаними областью перегляду:

Тоді як абсолютно розташовані елементи все ще пов’язані областью перегляду і спричинять прокрутку:

..крім звичайно, ваш батьківський елемент використовує overflow: ?для визначення поведінки прокрутки (якщо така є).

При абсолютному позиціонуванні та фіксованому позиціонуванні елементи виводяться з потоку HTML.

Ви можете побачити простий огляд тут: W3School

Крім того, якщо я правильно пам’ятаю, при оголошенні елемента відносним він за замовчуванням залишатиметься на тому самому місці, як і в іншому випадку, але ви отримуєте можливість абсолютно розташовувати елементи всередині нього відносно цього елемента, що мені здалося дуже корисним в минулому.

У відповідь на "чому CSS все ще реалізує position: static;" в одному сценарії, використовуючи позицію: відносна для батьків і позиція: абсолютна для дитини, обмежує масштабовану ширину дитини. У горизонтальній системі меню, де ви можете мати "стовпці" посилань, використання "width: auto" не працює з відносними батьками. У цьому випадку зміна його на "статичне" дозволить змінювати ширину залежно від вмісту всередині.

Я витратив добрі кілька годин, дивуючись, чому я не зміг налаштувати мій контейнер на основі кількості вмісту в ньому. Сподіваюся, це допомагає!

Позиційне відношення дозволяє використовувати верхній / нижній / лівий / правий для позиціонування. Статистика не дозволить вам цього зробити, якщо ви не використовуєте параметри поля. Існує різниця між Top і margin-top.

Вам не потрібно буде використовувати статику, оскільки це за замовчуванням

Відносне положення відносно нормального потоку. Відносне положення цього елемента (зі зміщеннями) відносно положення, де цей елемент був би нормально, якби його не переміщали.

Метью Еббот має справді хорошу відповідь.

Абсолютні і відносні позиційований деталі підкоряються top, left, rightі bottomкоманди (зміщення) , де статичні розташовані елементи не.

Відносно розташовані елементи переміщують зміщення з місця, де вони зазвичай знаходились б у html.

Абсолютно позиціоновані елементи переміщують зміщення від документа або наступного відносно розташованого елемента вгору по дереву DOM.

Статичні: СТАТИЧНИЙ позиціонований елемент - це те, що ми отримуємо за замовчуванням (нормальне позиціонування об’єктів).

Відносно: відносно поточної позиції, але може бути переміщено. Або RELATIVE позиціонований елемент позиціонується відносно САМОГО.

static і relative - це атрибути позиції. relative використовується для багатьох цілей. Не для одного. Але майте на увазі, що статичні та відносні не шкодять нормальному документообігу HTML. static - це типове положення, яке при записі будь-якого елемента в Html. Якщо елемент має відносне положення, цей елемент може бути розміщений відносно його рідного місця. коли ви хочете скоригувати елемент з малих пробілів, використовуйте відносне положення, щоб вам не потрібно було додавати поле, відступ і т. д., якщо елемент має відносну позицію та має дочірній елемент. Тут ми можемо проводити вимірювання відносно батьківського рівня. Якщо ви додаєте дочірню ширину 10%, це означає (ширина + відступ) x10%. Але ви не додаєте відносне ключове слово, ви отримуєте widthx10%. Крім цього, найважливішим використанням родича є; Ви можете розташувати будь-який елемент зверху.