Собираем всё вместе

После изучения основных свойств CSS, таких как z-index, display, position и других, самое время научиться комбинировать их для создания полноценной вёрстки.

Пример комплексной вёрстки

<div class="container">
  <header class="header">Шапка</header>
  <nav class="menu">Меню</nav>
  <main class="content">Основной контент</main>
  <aside class="sidebar">Боковая панель</aside>
  <footer class="footer">Подвал</footer>
</div>

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu menu"
    "content sidebar"
    "footer footer";
  grid-gap: 10px;
}

.header { grid-area: header; background: lightblue; }
.menu { grid-area: menu; background: lightgreen; }
.content { grid-area: content; background: lightyellow; }
.sidebar { grid-area: sidebar; background: lightcoral; }
.footer { grid-area: footer; background: lightgray; }

Советы по комбинированию

  • Используйте display: grid или flex для основной структуры страницы.
  • Применяйте z-index для управления наложением всплывающих элементов, модальных окон и меню.
  • Настройте position только там, где это действительно необходимо.
  • Комбинируйте блочные, строчные и inline-block элементы для гибкости и адаптивности.