Главная | Пиротехника

Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

позиціонування вмісту

  1. Позиціонування через float
  2. float на практиці
  3. Демонстрація макета без float
  4. Демонстрація макета з float
  5. Демонстрація трёхколоночного макета з float
  6. Демонстрація макета без очищення float
  7. очищення float
  8. Демонстрація макета з очищенням float
  9. Демонстрація макета з вмістом float
  10. На практиці
  11. Позиціонування через inline-block
  12. inline-block на практиці
  13. Демонстрація елементів inline-block з пропуском
  14. Демонстрація елементів inline-block без пробілів
  15. Створення багаторазове вікорістовуваніх макетів
  16. на практике
  17. Демонстрація і вихідний код
  18. Унікальне позиціонування елементів
  19. відносне позіціонування
  20. Демонстрація відносного позиціонування
  21. абсолютне позіціонування
  22. Демонстрація абсолютного позиціонування
  23. резюме
  24. Ресурси і посилання

Однією з кращих сторін CSS є те, що стилі дають нам можливість позиціонувати вміст і елементи на сторінці практично будь-яких мислимих чином. Це вносить структурність в наш дизайн і допомагає зробити контент більш наочним.

Є кілька різних типів позиціонування в CSS, кожен з цих типів має свою область дії. У цьому розділі ми збираємося глянути на кілька різних випадків застосування - створення багаторазово використовуваних макетів і унікальне позиціонування одноразових елементів, а також опис декількох методів як це зробити.

Позиціонування через float

Один із способів позиціонування елементів на сторінці - через властивість float. Це властивість досить універсально і може застосовуватися різними шляхами.

По суті, властивість float бере елемент, прибирає його зі звичайного потоку сторінки і позиціонує ліворуч або праворуч від батьківського елемента. Всі інші елементи на сторінці будуть обтікати такий елемент. Наприклад, абзаци будуть обтікати зображення, якщо для елемента <img> встановлено властивість float.

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

Властивість float приймає кілька значень, два найпопулярніших - це left і right, вони дозволяють елементу розташовуватися ліворуч або праворуч від свого батька.

img {float: left; }

float на практиці

Давайте створимо загальний макет сторінки з шапкою вгорі, двома колонками в центрі і підвалом внизу. В ідеалі цю сторінку слід розмітити за допомогою елементів <header>, <section>, <aside> і <footer>, як описано в уроці 2 «Знайомство з HTML». Усередині елемента <body> HTML може виглядати так:

<Header> ... </ header> <section> ... </ section> <aside> ... </ aside> <footer> ... </ footer>

Демонстрація макета без float

Тут елементи <section> і <aside> є блоковими, тому вони укладаються один поверх іншого за замовчуванням. Однак ми хочемо, щоб ці елементи розташовувалися пліч-о-пліч. Встановивши float для <section> як left, а для <aside> як right, ми можемо позиціонувати їх як дві колонки, розташованих навпроти один одного. Наш CSS повинен виглядати так:

section {float: left; } Aside {float: right; }

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

Коли ми встановлюємо елемент обтічним, то прибираємо його зі звичайного потоку HTML-документа. Це призводить до того, що ширина цього елемента за замовчуванням стає шириною його вмісту. Іноді, наприклад, коли ми створюємо колонки для багаторазово використовуваного макета, така поведінка небажано. Це можна виправити шляхом додавання властивості width з фіксованим значенням для кожної колонки. Крім того, щоб обтічні елементи не стикалися один з одним, в результаті чого вміст одного елемента розташовується поруч з іншим, ми можемо використовувати властивість margin, щоб встановити простір між елементами.

Нижче ми розширюємо попередній блок коду, додавши margin і width для кожної колонки, щоб краще формувати наш бажаний результат.

section {float: left; margin: 0 1.5%; width: 63%; } Aside {float: right; margin: 0 1.5%; width: 30%; }

Демонстрація макета з float

float можуть змінити значення display у елемента

Для обтічного елемента також важливо розуміти, що об'єкт був видалений з звичайного потоку сторінки і що у елемента може змінитися значення display, задане за замовчуванням. Властивість float спирається на те, що у елемента значення display задано як block і може змінити значення display у елемента за замовчуванням, якщо він ще не відображається як блоковий елемент.

Наприклад, елемент, у якого display вказаний як inline, такий як рядковий <span>, ігнорує будь-які властивості height або width. Однак, якщо для сатиричного елемента вказати float, значення display зміниться на block і тоді елемент вже може приймати властивості height або width.

Коли ми застосовуємо float для елемента, то повинні стежити за тим, як це впливає на значення властивості display.

Для двох колонок ви можете встановити float, для однієї колонки як left, а для іншої як right, але для кількох колонок нам доведеться змінити наш підхід. Скажімо, наприклад, ми хотіли б отримати ряд з трьох колонок між нашими елементами <header> і <footer>. Якщо ми викинемо наш елемент <aside> і скористаємося трьома елементами <section>, наш HTML може виглядати наступним чином:

<Header> ... </ header> <section> ... </ section> <section> ... </ section> <section> ... </ section> <footer> ... </ footer>

Щоб розташувати ці три елементи <section> в рядок з трьох колонок, ми повинні задати float для всіх елементів <section> як left. Ми також повинні налаштувати ширину <section> з урахуванням додаткових колонок і розташувати їх один поруч з іншим.

section {float: left; margin: 0 1.5%; width: 30%; }

Тут у нас є три колонки, все з однаковою шириною і значенням margin, а також з float, заданим як left.

Демонстрація трёхколоночного макета з float

Очищення і вміст float

Властивість float було спочатку розроблено, щоб дозволити вмісту обтікати навколо зображень. Для зображення може бути задано float і весь вміст навколо цього зображення, природно, обтікає навколо нього. Хоча це прекрасно працює для картинок, властивість float насправді не було призначене для використання в макеті і з метою позиціонування і, таким чином, воно йде з декількома пастками.

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

Часто значення властивостей margin і padding інтерпретуються некоректно, змушуючи їх зливатися з обтічним елементом. Інші властивості також можуть бути порушені.

Інша помилка полягає в тому, що іноді небажаний контент починає обтікати елемент з float. Видалення елемента з потоку документа дозволяє всім елементам навколо обтічного елемента обходити його і задіяти будь-яке доступне простір навколо обтічного елемента, що часто буває небажано.

У нашому попередньому прикладі з двома колонками, після того як ми додали float до елементів <section> і <aside>, але до того як встановили властивість width до будь-якого з них, вміст всередині елемента <footer> розташовувалося між двома обтічними елементами вище нього, заповнюючи все доступне простір. Отже, елемент <footer> працював би в проміжку між елементами <section> і <aside>, займаючи вільне місце.

Демонстрація макета без очищення float

Щоб запобігти вміст від обмотування навколо обтічних елементів, нам потрібно зробити очистку float і повернути сторінку в її звичайний потік. Ми розглянемо як очистити float, а потім поглянемо на їх вміст.

очищення float

Очищення float відбувається за допомогою властивості clear, яке приймає кілька різних значень: найбільш часто використовувані значення - left, right і both.

div {clear: left; }

Значення left очищає ліві float, в той час як значення right очищає праві float. Значення both, однак, очистить ліві і праві float і часто є найбільш ідеальним варіантом.

Повертаючись до нашого попереднього прикладу, якщо ми використовуємо властивість clear зі значенням both для елемента <footer>, то можемо очистити float. Важливо, що clear застосовується до елементу, вказаною після обтічних елементів, а не раніше, щоб повернути сторінку в її звичайний потік.

footer {clear: both; }

Демонстрація макета з очищенням float

вміст float

Замість очищення float, ще одним варіантом є установка вмісту float. Результат вийде майже такий же, однак вміст float дійсно гарантує, що всі наші стилі будуть відображатися належним чином.

Щоб встановити вміст float, обтічні елементи повинні знаходитися всередині батьківського елементу, він буде виступати в якості контейнера, залишаючи потік документа повністю звичайним за його межами. У стилях для цього батьківського елемента представлений клас group, як показано тут:

.group :: before, .group :: after {content: ""; display: table; } .Group :: after {clear: both; } .Group {clear: both; * Zoom: 1; }

Тут трохи що відбувається, але, по суті, все що CSS робить - очищає всі обтічні елементи всередині елемента з класом group і повертає документ в звичайний потік.

Більш конкретно, псевдоелементи :: before і :: after, як зазначено в уроці 4, динамічно генерують елементи вище і нижче елемента з класом group. Ці елементи не включають в себе будь-якої контент і відображаються як табличні елементи, подібно елементам блоковим. Динамічно генерований елемент після елемента з класом group очищає float всередині елемента з класом group, так само, як і clear раніше. І, нарешті, елемент з класом group також очищає всі float, які можуть з'явитися до нього на випадок, якщо існує float із значенням left або right. Також сюди включена невелика хитрість, яка змушує старі браузери грати красиво.

Тут більше коду, ніж єдина команда clear: both, але він може виявитися вельми корисним.

Розглядаючи наш макет сторінки з двома колонками ми могли б обернути <section> і <aside> батьківським елементом. Цей батьківський елемент буде містити в собі обтічні елементи. Код буде виглядати наступним чином:

HTML

<Header> ... </ header> <div class = "group"> <section> ... </ section> <aside> ... </ aside> </ div> <footer> ... </ footer>

CSS

.group :: before, .group :: after {content: ""; display: table; } .Group :: after {clear: both; } .Group {clear: both; * Zoom: 1; } Section {float: left; margin: 0 1.5%; width: 63%; } Aside {float: right; margin: 0 1.5%; width: 30%; }

Демонстрація макета з вмістом float

Показана тут техніка відома як «clearfix» і часто зустрічається на інших сайтах з ім'ям класу clearfix або cf. Ми вирішили використовувати ім'я класу group, тому що він є представником групи елементів і краще висловлює вміст.

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

На практиці

Повернемося до сайту Styles Conference і випробуємо на ньому додавання float до деякого вмісту.

  1. Насамперед, перед застосуванням float до будь-якого елементу, давайте забезпечимо вмістом ці обтічні елементи, додавши clearfix в наш CSS. У файлі main.css, трохи нижче наших стилів сітки, додамо clearfix під ім'ям класу group, як і раніше. / * ======================================== Clearfix ======= ================================= * / .group :: before, .group :: after {content: " "; display: table; } .Group :: after {clear: both; } .Group {clear: both; * Zoom: 1; }

  2. Тепер, коли ми можемо використовувати float, давайте задамо його для основного <h1> всередині елемента <header> як left і дозволимо решті вмісту в заголовку обтікати його справа.

    Щоб зробити це, додамо клас logo до елементу <h1>. Потім всередині нашого CSS додамо новий розділ стилів для основного заголовка. У цьому розділі ми виберемо елемент <h1> з класом logo та встановимо float як left.

    HTML

    <H1 class = "logo"> <a href="index.html"> Styles Conference </a> </ h1>

    CSS

    / * ======================================== Основний заголовок ====== ================================== * / .logo {float: left; }

  3. Поки ми тут, додамо трохи більше деталей до нашого логотипу. Почнемо з розміщення елементу <br> або розриву рядка між словами «Styles» і «Conference», щоб змусити текст нашого логотипу розташовуватися на двох рядках.

    В CSS додамо кордон по верху нашого логотипу і невеликий вертикальний padding, щоб логотип вільно «дихав».

    HTML

    <H1 class = "logo"> <a href="index.html"> Styles <br> Conference </a> </ h1>

    CSS

    .logo {border-top: 4px solid # 648880; padding: 40px 0 22px 0; float: left; }

  4. Оскільки ми зробили елемент <h1> обтічним, то хочемо встановити вміст float. Найближчим батьком для <h1> є елемент <header>, тому ми додамо до нього клас group. Це застосує до нього стилі clearfix, які ми встановили раніше.

    <Header class = "container group"> ... </ header>

  5. Елемент <header> приймає форму, так що давайте поглянемо на елемент <footer>. Подібно до того, що ми зробили з <header>, ми встановимо float для наших авторських прав як left всередині <small> і нехай всі інші елементи обтікають його справа.

    На відміну від елемента <header>, проте, ми не збираємося застосовувати клас безпосередньо до обтекаемому елементу. На цей раз ми збираємося додати клас до батькові чи матері обтічного елемента і використовувати унікальний селектор CSS, щоб вибрати елемент, а потім задати йому float.

    Почнемо з додавання класу primary-footer до елементу <footer>. Оскільки ми знаємо, що у нас будуть обтічні елементи всередині <footer>, то повинні додати клас group, поки ми тут.

    <Footer class = "primary-footer container group"> ... </ footer>

  6. Тепер, коли клас primary-footer встановлений для елемента <footer>, ми можемо використовувати цей клас, щоб цілеспрямовано вибрати елемент <small> за допомогою CSS. Ми хочемо задати йому float як left. Не забудьте створити новий розділ в нашому файлі main.css для стилю основного підвалу.

    / * ======================================== Основний підвал ====== ================================== * / .primary-footer small {float: left; }

    Для перевірки - тут ми вибираємо елемент <small>, який повинен знаходитися всередині елемента зі значенням primary-footer у атрибута class, такий як наш елемент <footer>, наприклад.

  7. Нарешті, додамо невеликий padding зверху і знизу елемента <footer>, це допоможе трохи відокремити його від іншої частини сторінки. Ми можемо зробити це безпосередньо за допомогою класу primary-footer.

    .primary-footer {padding-bottom: 44px; padding-top: 44px; }

З урахуванням всіх цих змін в елементах <header> і <footer>, ми повинні бути впевнені, що внесли їх на кожній сторінці, а не тільки на сторінці index.html.

Мал. 5.01. За допомогою декількох float, елементи <header> і <footer> на головній сторінці Styles Conference працюють спільно

Позиціонування через inline-block

На додаток до використання float, ще один спосіб, яким ми можемо позиціонувати контент - це застосування властивості display в поєднанні зі значенням inline-block. Метод з inline-block, як ми ще обговоримо, в першу чергу корисний для компонування сторінок або для розміщення елементів в лінію поруч один з одним.

Нагадаємо, що значення inline-block для властивості display відображає елементи в лінію і дозволяє їм приймати всі властивості блокової моделі, включаючи height, width, padding, border і margin. Застосування inline-block дозволяє нам повною мірою скористатися блокової моделлю, не турбуючись про очищення будь-яких float.

inline-block на практиці

Давайте поглянемо на наш трёхколоночний приклад з самого початку. Почнемо ми, зберігаючи наш HTML таким:

<Header> ... </ header> <section> ... </ section> <section> ... </ section> <section> ... </ section> <footer> ... </ footer>

Тепер замість float для наших трьох елементів <section> ми змінимо у них значення display на inline-block, залишаючи властивості margin і width ті, що були раніше. В результаті наш CSS буде виглядати наступним чином:

section {display: inline-block; margin: 0 1.5%; width: 30%; }

На жаль, одного цього коду недостатньо щоб зробити трюк і останній елемент <section> виштовхується на новий рядок. Пам'ятайте, оскільки рядково-блокові елементи відображаються на одній лінії один за одним, вони включають єдиний простір між ними. Коли розмір кожного окремого простору додається до ширини і значенням горизонтального margin всіх елементів в рядку, загальна ширина стає занадто великий, виштовхуючи останній елемент <section> на новий рядок. Щоб відобразити всі елементи <section> на одному рядку, слід видалити порожній простір між кожним <section>.

Демонстрація елементів inline-block з пропуском

Видалення простору між рядково-блоковими елементами

Є кілька методів, як видалити простір між рядково-блоковими елементами і деякі з них більш складні, ніж інші. Ми збираємося зосередитися на двох найпростіших методах, кожен з яких відбуваються всередині HTML.

Перше рішення - це помістити кожен новий відкриває тег елемента <section> в тому ж рядку, що і закриває тег попереднього елемента <section>. Замість використання нового рядка для кожного елемента ми в підсумку починаємо елементи з тієї ж рядки. Наш HTML може виглядати наступним чином:

<Header> ... </ header> <section> ... </ section> <section> ... </ section> <section> ... </ section> <footer> ... </ footer>

Написання рядково-блокових елементів таким чином гарантує, що простору між такими елементами в HTML не існує. Отже, простір і не з'явиться при відображенні сторінки.

Демонстрація елементів inline-block без пробілів

Ще один метод для видалення простору між рядково-блоковими елементами полягає у відкритті коментаря HTML безпосередньо після закриває тега елемента. Потім закрийте коментар безпосередньо перед відкриває тегом наступного елемента. Це дозволяє рядково-блоковим елементам починатися і завершуватися на окремих рядках в HTML і «закоментуйте» будь-який потенційний простір між елементами. В результаті код буде виглядати наступним чином:

<Header> ... </ header> <section> ... </ section> <! - -> <section> ... </ section> <! - -> <section> ... </ section> <footer> ... </ footer>

Жоден з цих варіантів не є досконалим, але вони корисні. Я схиляюся на користь застосування коментарів для кращої організації, але який варіант ви виберете повністю залежить від вас.

Створення багаторазове вікорістовуваніх макетів

При створенні сайту всегда краще Написати модульні стилі, Які могут буті повторно задіяні в других місцях, а багаторазове Використовують макети знаходяться у верхній части списку повторно застосовуваного коду. Макети можуть бути створені за допомогою float або рядково-блокових елементів, але що працює краще і чому?

Питання що краще для структури сторінки - обтічні або рядково-блокові елементи відкритий для обговорення. Мій підхід полягає у використанні рядково-блокових елементів для створення сітки або макета сторінки, а потім задіяти float, коли мені хочеться щоб контент обтікав навколо даного елемента (для чого float і були призначені при роботі з зображеннями). Взагалі, я також вважаю, що зі рядково-блоковими елементами легше працювати.

Проте, використовуйте те, що працює краще для вас. Якщо з одним підходом ви знайомі краще ніж з іншим, тоді задійте його.

В даний час в роботі з'явилися нові специфікації CSS - зокрема, властивості flex- і grid-, які допоможуть вирішити, як найкраще зверстати сторінки. Слідкуйте за цими методами, коли вони почнуть спливати.

на практике

З твердим розумінням багаторазово використовуваних макетів, прийшов час впровадити один на наш сайт Styles Conference.

  1. Для сайту Styles Conference ми створимо трёхколоночний макет використовуючи рядково-блокові елементи. Ми зробимо це так, щоб отримати три колонки однакової ширини або дві колонки із загальною шириною, розділеної між ними як 2/3 для однієї і 1/3 для іншої.

    Для початку ми створимо класи, що визначають ширину цих колонок. Ці два класи ми назвемо col-1-3 для однієї третини і col-2-3 для двох третин. У розділі «Сітка» нашого файлу main.css перейдемо вперед і визначимо ці класи і відповідну їм ширину.

    .col-1-3 {width: 33.33%; } .Col-2-3 {width: 66.66%; }

  2. Ми хочемо щоб обидві колонки відображалися як рядково-блокові елементи. Нам також треба переконатися, що вертикальне вирівнювання у них задано по верхній частині кожної колонки.

    Давайте створимо два нових селектора, які спільно використовуватимуть display і vertical-align.

    .col-1-3, .col-2-3 {display: inline-block; vertical-align: top; }

    Погляньте на CSS знову. Ми створили два селектора класу col-1-3 і col-2-3 розділених комою. Кома в кінці першого селектора означає, що за нею слідує інший селектор. Після другого селектора йде відкриває фігурна дужка, яка повідомляє що починається опис стилю. За допомогою коми розділяє селектори ми можемо прив'язати один стиль до кількох селекторам одночасно.

  3. Ми хочемо помістити деякий простір між колонок, яке допоможе розбити. Це можна зробити, додавши горизонтальний padding до кожної колонці.

    Це добре працює, проте, коли дві колонки розташовуються поруч один з одним, ширина простору між ними буде вдвічі більше, ніж простір від зовнішнього краю. Щоб врівноважити це, ми помістимо всі наші колонки в сітку і додамо до неї той же padding.

    Давайте скористаємося класом grid, щоб визначити нашу сітку, а потім поставимо однаковий горизонтальний padding для класів grid, col-1-3 і col-2-3. З комами, знову розділяють наші селектори, наш CSS виглядає наступним чином:

    .grid, .col-1-3, .col-2-3 {padding-left: 15px; padding-right: 15px; }

  4. Коли ми встановлюємо горизонтальний padding, нам потрібно бути обережними. Пам'ятайте, в минулому уроці ми створили контейнер з класом container по центру всього нашого контенту на сторінці з шириною 960 пікселів. В даний момент, якщо б ми поставили елемент з класом grid всередину елемента з класом container, то їх горизонтальні padding склалися б разом і наші колонки не будуть відображатися пропорційно ширині решти сторінки.

    Ми не хочемо щоб це сталося, так що замість цього ми повинні поділитися деякими стилями з правил container з набором правил grid. Зокрема, ми повинні поділитися властивістю width (щоб переконатися, що наша сторінка залишається фіксованою на 960 пікселів в ширину) і властивістю margin (щоб вирівняти по центру сторінки елемент з класом grid).

    Ми здійснимо це, розбиваючи набір старих правил container на наступне:

    .container, .grid {margin: 0 auto; width: 960px; } .Container {padding-left: 30px; padding-right: 30px; }

    Тепер будь-який елемент з класом container або grid буде 960 пікселів в ширину і розташовуватися по центру сторінки. Крім того, ми зберегли існуючий горизонтальний padding для будь-якого елемента з класом container шляхом переміщення його в новий, окремий набір правил.

  5. Добре, всю важку необхідну частину з налаштування сітки завершили. Тепер прийшов час для роботи з нашим HTML і перегляду, як ці класи діють.

    Ми почнемо з тізерів на головній сторінці, в файлі index.html, вирівнявши їх по трьом колонках. В даний час тизери обгорнуті елементом <section> з класом container. Ми хочемо змінити клас container на grid так, щоб усередині ми могли почати розміщення колонок.

    <Section class = "grid"> ... </ section>

  6. Далі ми хочемо додати клас col-1-3 для кожного елемента <section> всередині <section> з класом grid.

    <Section class = "grid"> <section class = "col-1-3"> ... </ section> <section class = "col-1-3"> ... </ section> <section class = "col-1-3"> ... </ section> </ section>

  7. І, нарешті, оскільки кожна наша колонка є рядково-блоковим елементом, нам слід переконатися що ми видалили порожній простір між ними. Щоб зробити це ми скористаємося коментарями і додамо трохи документації до кожного розділу, щоб краще організувати свій код.

    <Section class = "grid"> <! - Спікери -> <section class = "col-1-3"> ... </ section> <! - Розклад -> <section class = "col- 1-3 "> ... </ section> <! - Місце проведення -> <section class =" col-1-3 "> ... </ section> </ section>

    Для перевірки - в рядку 3 ми залишили коментар, що ідентифікує розділ «Спікери», який за ним слід. В кінці рядка 7 ми відкриваємо коментар відразу після закриває тега </ section>. Усередині цього коментаря, в рядку 9 ми визначаємо наступний розділ «Розклад». Потім закриваємо коментар на початку рядка 11, відразу перед відкриває тегом <section>. Аналогічна структура коментарів з'являється в рядках з 13 до 17 між двома елементами <section>, прямо перед розділом «Місце проведення». В цілому, ми закоментувавши будь-який потенційний порожній простір між колонок, одночасно використовуючи ті ж коментарі для ідентифікації наших розділів.

Тепер у нас є повторно використовувана трёхколоночная сітка, яка підтримує різні розстановки, з використанням ширини колонок як 1/3 і 2/3. Наша головна сторінка тепер містить три колонки, розділяючи всі тизери.

Мал. 5.02. Головна сторінка Styles Conference тепер включає трёхколоночний макет

Демонстрація і вихідний код

Нижче ви можете переглянути сайт Styles Conference в його нинішньому стані, а також завантажити вихідний код сайту на даний момент.

Перегляд сайту Styles Conference або Завантажити вихідний код

Унікальне позиціонування елементів

Рано чи пізно кожен забажає точно позиціонувати елемент, але float або рядково-блокові елементи не дозволяють виконати такий трюк. Обтічні елементи, які видаляють елемент з потоку сторінки, часто призводять до небажаних результатів, оскільки навколишні елементи обтікають навколо елемента з float. Рядково-блокові елементи, якщо тільки ми не створюємо колонки, можуть бути досить незручні, коли справа стосується правильного положення. Для подібних ситуацій ми можемо використовувати властивість position в поєднанні з властивостями зміщення блоку.

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

Автоматично у кожного елемента значення position встановлено як static, це означає, що елемент існує в звичайному потоці документа і не приймає будь-які властивості для його зміщення. Значення static найбільш часто переписується значенням relative або absolute, які ми розглянемо далі.

відносне позіціонування

Значення relative для властивості position дозволяє елементам відображатися в звичайному потоці сторінки, резервуючи місце для елемента як передбачалося і не дозволяючи іншим елементам його обтікати. Однак, воно також дозволяє модифікувати положення елемента за допомогою властивостей зміщення. Наприклад, розглянемо наступні HTML і CSS:

HTML

<Div> ... </ div> <div class = "offset"> ... </ div> <div> ... </ div>

CSS

div {height: 100px; width: 100px; } .Offset {left: 20px; position: relative; top: 20px; }

Демонстрація відносного позиціонування

Тут для другого елементу <div> з класом offset задано значення position як relative, а також дві властивості зміщення - left і top. Це зберігає вихідне положення елемента і інших елементів заборонено рухатися в цю область. Крім того, властивості зміщення переміщують елемент, виштовхуючи його на 20 пікселів від лівого і на 20 пікселів від верхнього вихідного місця розташування.

Для щодо позиціонуються елементів важливо знати, що властивості зміщення блоку визначають, куди елемент буде переміщений, з огляду на його початкове положення. Таким чином, властивість left зі значенням 20 пікселів фактично штовхає елемент вправо на 20 пікселів. Властивість top зі значенням 20 пікселів потім буде штовхати елемент вниз на 20 пікселів.

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

абсолютне позіціонування

Значення absolute для властивості position відрізняється від значення relative тим, що елемент з абсолютним позиціонуванням не з'являється в звичайному потоці документа, вихідне простір і положення абсолютно позиціонується елемента не резервується.

Крім того, абсолютно позиціонуються переміщаються щодо їх найближчого щодо позиціонованого батьківського елемента. Якщо щодо позиціонованого батька не існує, то абсолютно позиційований елемент буде позиціонуватися щодо елемента <body>. Це невелика частина інформації; давайте поглянемо на те, як це працює всередині деякого коду:

HTML

<Section> <div class = "offset"> ... </ div> </ section>

CSS

section {position: relative; } Div {position: absolute; right: 20px; top: 20px; }

Демонстрація абсолютного позиціонування

У цьому прикладі елемент <section> позиціонується щодо, але не включає будь-яких властивостей зміщення. Отже, його становище не змінюється. Елемент <div> з класом offset включає значення position як absolute. Оскільки елемент <section> є найближчим щодо позиційованим батьківським елементом для <div>, то елемент <div> буде позиціонуватися щодо елемента <section>.

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

В результаті властивостей right і top, елемент <div> з'явиться в 20 пікселях справа і 20 пікселях зверху всередині <section>.

Оскільки елемент <div> позиціонуються абсолютно, він не розташовується в звичайному потоці сторінки і буде перекривати будь-які оточують його елементи. Крім того, початкове положення <div> не зберігається і інші елементи можуть зайняти це місце. Як правило, більша частина позиціонування може відбуватися без застосування властивостей position і властивостей зміщення, але в деяких випадках вони можуть виявитися надзвичайно корисні.

резюме

Вивчення позиціонування вмісту в HTML і CSS є величезним кроком в бік освоєння цих мов. Додайте до цього блокову модель і ось ми впевнено рухаємося по шляху перетворення в фронтенд-розробників.

Для перевірки, в цьому уроці ми розглянули наступне:

  • Що таке float і як його використовувати, щоб позиціонувати вміст.
  • Як очистити і встановити вміст обтічних елементів.
  • Як позиціонувати вміст за допомогою рядково-блокових елементів.
  • Як видалити порожній простір між рядково-блоковими елементами.
  • Як унікально позиціонувати контент через відносне і абсолютне позиціонування елементів.

Ми додаємо нові навички з кожним уроком, так що давайте продовжимо. Наступна тема - типографіка!

Ресурси і посилання

Автор і редактори

Автор: Шей Хоу

Остання зміна: 11.08.2018

Редактори: Влад Мержевіч

Макети можуть бути створені за допомогою float або рядково-блокових елементів, але що працює краще і чому?

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.