Сайт

Пример верстки сайта на html5 и css3: Верстка сайта на HTML5 и CSS3 за час! + Публикация на сервер

05.04.1982

Содержание

Основы HTML5 или учимся верстать на HTML5

Приветствую Вас, дороги читатели блога. Сегодня мы не много узнаем о основах новой разметке веб страниц HTML5. А так же узнаем как наш уже существующий сайт перевести в этот новый HTML язык.

Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

Верстка div (старая)

Друзья, сначала я начну с примеров, так как на примерах всегда понятнее. Как Вы уже догадались, что я перевёл свой блог на HTML5, и по этому возьмём его как пример, рассмотрим старую вёрстку с помощью DIV и посмотри как выглядит новая на HTML5.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
 <head profile="http://gmpg.org/xfn/11">

<!-- ......... -->

</head>
 <body>
 <!-- Шапка сайта -->

<div>

<!-- Навигация -->

<div>
 <!-- ......... -->
 </div>
 <!-- Конец навигации -->

</div><!-- Конец шапки сайта -->

<div><!-- основной блок -->

<div><!-- блок там где отображаются посты -->

<!-- Начало поста -->
 <div>
 <!-- ......... -->
 </div>
 <!-- Начало поста -->

<div> <!-- блок боковой колонки -->
 <!-- ......... -->
 </div>

</div>
 </div>

<div><!-- Футер сайта -->
 <!-- .
........ --> </div> </body> </html>

Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.

А вот сейчас нам нужно данный код перевести в HTML5, но как оказывается что этот новый стандарт принёс с собой не мало новых тегов, о которых нужно знать перед тем как перевести наш код.

Теги HTML5

Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

<header> — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.

<section> — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

<article> — обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.

<aside> — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

<footer> — в этот тег должен входить низ Вашего сайта (Футер)

<hgroup> — в данный тег входят групы заголовков сайтов, например <h3>.

<nav> — данный тег включает в себя всю навигацию на сайте (меню).

Хочу сказать, что эти все теги обязательно должны закрываться, например если это тег <article> он должен иметь закрывающий тег </article> и так далее.

Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:

<audio> — данный тег выводит аудио на сайте.

<canvas> — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

<menu> — в этот тег должны входить список меню, например ul li.

<time> — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

<video> — вставляет видео на страницу.

<wbr> — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу <br>.

Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

А вот как он выглядит по новому:

<!doctype html>

Ну как Вам разница? 🙂 По моему существенная. Так же ещё проще стал тег <html>. Он был такой:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">

А стал такой:

<html lang=ru>

Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

Верстка (новая)

Перед тем как приступить к вёрстке нам между тегами <head> и </head> нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

footer, nav, header, section, aside {

display: block

}

Всё, первый шаг готов. Теперь давайте посмотри на готовый уже HTML5 код, который у меня получился, а также подробно разберём его:

<!DOCTYPE html>
<html lang="ru">
<head>

<!-- ......... -->

</head>
<body>

<!-- Шапка сайта -->

<header>

<!-- Навигация -->

<nav>
<!-- ......... -->
</nav>
<!-- Конец навигации -->

</header><!-- Конец шапки сайта -->

<section><!-- основной блок -->

<aside><!-- блок там где отображаются посты -->
<!-- Начало поста -->
<article>
<!-- ......... -->
</article>
<!-- Начало поста -->

<aside> <!-- блок боковой колонки -->
<!-- ......... -->
</aside>

</div>
</section>

<footer><!-- Футер сайта -->
<!-- .
........ --> </footer> </body> </html>

Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.

Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div  с классом headerInner — <div id=»headerInner»>. Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 (<header>) можем смело его использовать вместо div  только с таким же классом. Таким образом у нас получилось следующее:

<header>

И не забываем поставить закрывающий тег </header>, а также удалить закрывающий div.

Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом <section>. В старой вёрстке этот главный блок выглядел так <div id=»wrapper»>, а в HTML5 будет выглядеть вот так <section id=»wrapper»>.

И опять же не забудьте поставить закрывающий тег и удалить старый div.

Придерживайтесь такого же принципа и в других тегах на сайте. Таким образом я перевёл свой блог в HTML5. И был приятно удивлён тем, что это совсем не сложно.

Вывод

Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

Опять рекомендую Вам переходить Вам на новую технологию.

Вот и всё что хотелось сказать по этому поводу. Друзья, если у Вас что то не будет получаться, спрашивайте в комментариях, и я обязательно помогу 🙂 До скорых встреч.

Пример верстки сайта на HTML и CSS

  • Немного о сайте
  • Верстаем сайт на HTML и CSS
  • Используем для верстки PHP
  • Последние обновления

Данный учебный сайт в первую очередь предназначен для получения практических навыков верстки веб-элементов при помощи возможностей только лишь HTML и CSS. Соответственно подразумевается, что читатель уже освоил учебники по данным дисциплинам, порешал стандартные задачки на закрепление теории и теперь хотел бы применить свои знания на практике.

Отметим, что дизайн сайта во многом копирует дизайн основного сайта. Тоже самое касается и многих его элементов. Это сделано для того, чтобы начинающие веб-программисты могли потренироваться в верстке на примере реально существующего проекта. Кстати, данный дизайн используется и на других наших сайтах: «В мире животных» и «Ок, Python!».

Также на странице учебных кодов имеется возможность загрузить и сверстать версию данного сайта на PHP. И хотя php-кода как такового совсем немного и сверстать сайт можно и без знаний языка, вы наверняка сможете оценить преимущества верстки страниц с использованием PHP и, скорее всего, пожелаете хотя бы бегло ознакомиться с его основами.

Прежде всего в разделе загрузок скачайте и распакуйте архив с кодом сайта. Затем при помощи комментариев внимательно изучите его, посмотрите вводный видеоурок (если он есть) и только затем приступайте к непосредственной верстке самого сайта.

1. Для начала создайте файловую структуру сайта. Папки по-возможности создавайте самостоятельно, в точности сохранив их оригинальные названия. Далее скопируйте в них изображения и другие вспомогательные файлы, например, иконку сайта. После приступайте к созданию пустых файлов наших будущих html-страниц, таблиц стилей, карты сайта и т.д. (опять же, сохраняйте их оригинальные названия).

2. Когда файловая структура сайта будет готова, приступайте к верстке индексной страницы. Вначале откройте в редакторе пустой индексный файл index.html и общую таблицу стилей site_styles.css (тоже пока пустую). Далее начинайте верстать общий для всех страниц макет сайта периодически подсматривая в образец. Однако копировать код не стоит, все необходимо набирать самостоятельно. В конце заполните домашнюю страницу содержимым, не забыв подключить к странице дополнительную таблицу стилей main_page_styles.css. При этом текст можете копировать, но не в коде вместе с тегами, а на странице в браузере, т.к. всю разметку нужно набирать самостоятельно.

3. После завершения верстки домашней страницы можете начинать верстать остальные страницы. При этом макет сайта верстать заново не нужно, копируйте его с индексной странички, удалив основное содержимое, подключив нужную дополнительную таблицу стилей, изменив в случае необходимости относительную адресацию и сделав активным соответствующий пункт бокового меню. Также следует иметь в виду, что для всех страниц, кроме домашней, необходимо использовать элемент base, что позволит обеспечить правильную относительную адресацию для страниц в папке категорий.

Отметим, что к страницам подключен небольшой js-скрипт (наша библиотека), содержащий функции для прокрутки страницы вверх и вниз, показа/скрытия меню сайта на мобильных устройствах и т.д. Соответственно, обратите внимание на код стрелок прокрутки и порядок подключения скрипта после тела документа.

После верстки всех страниц у вас должен получится адаптивный минисайт, который будет построен на относительной адресации и доступен для просмотра в браузере даже при отсутствии локального сервера.

Опять же, прежде всего в разделе загрузок скачайте и распакуйте архив с кодом сайта. Затем при помощи комментариев внимательно изучите его, посмотрите вводный видеоурок (если он есть) и только затем приступайте к непосредственной верстке самого сайта, учтя следующие особенности.

1. Сайт будет правильно работать только на сервере. Если вы используете локальную сборку XAMPP и сайт находится в папке xampp/htdocs/test/, то общий для всех страниц (включая индексную) элемент base должен использовать значение базового пути http://localhost/test/. Соответственно, на реальном хостинге в base нужно указать доменное имя сайта, например, https://okmysite.com/ (с последней косой чертой).

2. Опять же, к страницам подключен небольшой js-скрипт (наша библиотека), содержащий функции для прокрутки страницы вверх и вниз, показа/скрытия меню сайта на мобильных устройствах и т.д. Соответственно, обратите внимание на код стрелок прокрутки и порядок подключения скрипта после тела документа.

3. Обратите внимание на порядок подключения php-скриптов в начале и в конце страниц. Теперь редактировать код макета сайта нужно только в двух подключенных php-файлах, а не на каждой странице.

07.02.22. Учебный сайт полностью обновлен: проведена адаптация под мобильные устройства, подключена мини библиотека js-скриптов, доработана старая галерея и добавлена новая фотогалерея. Также исправлен ряд мелких ошибок.

01.05.21. На страницу загрузок добавлена версия сайта на PHP.

25.04.21. Макет сайта стал адаптивным, также были добавлены новые примеры верстки.

23.04.21. На страницы «Примеры анимации» и «Многоколоночная верстка» были добавлены новые примеры верстки.

22.04.21. Добавлена страница «Калькуляторы», также добавлены новые примеры на страницы «Оформление списков» и «Создание html-форм».

21.04.21. Добавлена страница «Меню сайта», изменена главная страница сайта.

21.04.21. Изменена структура и оформление учебного сайта. Добавлены новые страницы и элементы.

Лучшие книги по HTML и CSS для начинающих с нуля – Библиотека программиста

Подборка лучших книг по HTML и CSS для начинающих с нуля. Актуальная литература на русском языке с лучшими оценками и отзывами веб-программистов и верстальщиков.

Изучаем HTML, XHTML и CSS (Head First). Элизабет Робсон, Эрик Фримен

Показывает на простых примерах, как начать верстать сайты с нуля. Подходит как новичкам, так и профессионалам. Однако не стоит рассматривать данное учебное пособие как современный справочник. Это больше фундаментальная книга по основам. В последнем издании рассматриваются основы программирования на HTML 5. Есть множество наглядных примеров и скриншотов.

Большая книга CSS. Дэвид Макфарланд

Последнее издание книги поможет разобраться в основах HTML, но главная ее цель – это создание быстрых и динамичных страниц с помощью разметки CSS3. Книгу можно рассматривать как справочное руководство. Она будет полезна как верстальщикам, так и веб-дизайнерам. На страницах есть примеры кода, а также скриншоты с реальных сайтов.

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. Робин Никсон

Большая книга-справочник, которая поможет понять работу сайта на программном и серверном уровне. В последнем издании читатель может изучить такие программные среды как: HTML5, CSS, JavaScript, PHP. Поймет принципы работы базы данных MySQL, научится работать с cookie-файлами, а также применять вызовы AJAX для повышения скорости загрузки страниц сайта. Книга будет полезна опытным пользователям, которые уже разбираются в базовых принципах верстки.

HTML5. Разработка приложений для мобильных устройств. Эстель Вейл

Толковый справочник для усвоения механизмов работы сайтов и мобильных приложений. Также в книге представлены языки верстки и разметки: HTML5 и CSS3. Рассмотрены принципы работы множества API.

Автор делает акцент на создании страниц, которые будут быстро загружаться и правильно отображаться во всех известных ОС: iOS, Android, Blackberry или Windows Phone. При этом верстка «не улетит» и не собьётся на мониторе ПК, ноутбука или смартфона.

HTML и CSS. Разработка и дизайн веб-сайтов. Джон Дакетт

Удобное руководство по работе с HTML и CSS. На страницах есть масса визуальных примеров с фрагментами реального кода. Такой подход позволяет быстро вникнуть в принципы верстки и разметки страницы. Книга написана по принципу: «как построить сайт с нуля». Книга будет полезна к прочтению начинающим вебмастерам и дизайнерам.

Большая книга веб-дизайна. Терри Фельке-Моррис

Книга написана для создания сайтов, которые будут одинаково хорошо смотреться на обычном мониторе или на дисплее смартфона и планшета. В последнем издании читатель может ознакомиться с принципами верстки на HTML, изучить работу таблиц стилей CSS. Есть и сравнительные таблицы RGB. Особые разделы – принципы работы поисковых систем и монетизация сайтов. Изучение этих глав позволит извлекать реальную выгоду из интернет-проекта.

Книга будет полезна веб-мастерам разного уровня, а также дизайнерам.

HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. Бен Фрэйн

В данной книге сделан акцент на кроссплатформенность. Автор показывает на примерах, как можно сделать отличный и быстрый сайт, который будет правильно отображаться в разных браузерах и на экранах разных устройств. На страницах расписаны принципы работы в HTML5 и CSS3. Верстка и разметка разбирается на примере одного сайта. Его раскладывают по блокам от первой до последней страницы. Издание будет интересно начинающим веб-мастерам.

Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress. Нейт Купер, Ким Джи

Этот шедевр по изучению основ веб-программирования заслужил высокую оценку среди читателей и пользователей сети. Книга оформлена как комикс с короткими историями. После каждой отдельной темы с картинками идет пояснение с кусками кода и скриншотами. Книга-комикс понятна и проста. Ее оценили по достоинству как взрослые, так и школьники. На страницах издания описаны принципы работы HTML и СSS. Есть отдельная тема по CMS WordPress. Книга будет интересна читателям, которые только начинают познавать мир веб-программирования. Также подойдет детям школьного возраста и подросткам.

HTML5 и CSS3 для чайников. Крис Минник, Эд Титтел

Книга с говорящим названием. Она нацелена на полных новичков. На странице издания подробно расписаны принципы работы HTML5 и СSS3. В последнем издании есть масса картинок, практических советов, рекомендаций по созданию сайтов. Учебник создан для начинающих. Опытные веб-мастера вряд ли найдут для себя что-либо новое.

CSS для профи. Кит Грант

Из названия книги становится понятно, что она нацелена на глубокое погружение в тему каскадных таблиц стилей CSS. Издание можно рассматривать как справочник. Книга будет полезна опытным веб-мастерам и дизайнерам. Новички могут брать из нее дополнительные примеры и объяснения при работе с более простыми изданиями. В книге есть описания принципов работы WebPack, Flex и Grid, а также методы подборки оптимальных шрифтов.

Выводы

  1. Фундаментальная книга для изучения HTML и CSS: «Изучаем HTML, XHTML и CSS» (серия Head First). Элизабет Робсон, Эрик Фримен.
  2. Лучшая книга для старта в CSS и верстке сайтов: «Большая книга CSS». Дэвид Макфарланд.
  3. Книга для комплексного изучения веб-программирования и создания сайтов: «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5». Робин Никсон.
Если вы предпочитаете смотреть видеоуроки, посмотрите их версию YouTube на моем канале!

Что делает положение CSS?

Используя CSS, вы можете визуально расположить все элементы на веб-странице. Например, вы можете разместить элемент в самом верху страницы или на 50 пикселей ниже элемента перед ним.

Чтобы управлять тем, как элемент будет отображаться в макете, вам нужно использовать свойство CSS position . Кроме того, вы можете использовать некоторые другие свойства, связанные с позицией: сверху , справа , снизу , слева и z-index . (Мы рассмотрим их позже.)

Свойство position может принимать пять различных значений: статическое , относительное , абсолютное , фиксированное и липкое .

Звучит много, но не волнуйтесь!

Вот как работает каждое значение CSS position :

РЕКЛАМА

1. Статическая

Позиция: статическая — это значение по умолчанию, которое будет иметь элемент. Это означает, что если вы не объявите position для элемента в CSS, он автоматически будет установлен на static .

Важно отметить, что наличие статической позиции равнозначно отсутствию установки свойства position . (Это вступит в силу чуть позже с абсолютным позиционированием.)

Элементы со статическим позиционированием появятся на странице в том, что мы называем нормальным потоком. Например, если у вас есть несколько iv> элементы один за другим, они будут отображаться на странице непосредственно друг под другом.

Вот небольшая демонстрация, иллюстрирующая статическое положение. Мы используем следующую HTML-разметку:

 
 

И вот используемый нами CSS:

 .first {
   // Позиция не установлена, поэтому она статическая
}
.еще один {
   // Позиция не установлена, поэтому она статическая
   верх: 50 пикселей;
} 

Второй элемент имеет 9Для свойства 0009 top установлено значение 50px . Вы могли бы подумать, что это сдвинет его на 50 пикселей вниз, верно?

Однако вот как это будет выглядеть на веб-странице:

Посмотреть исходный код в Codepen

Поскольку оба элемента имеют статическое положение, ни одно из свойств CSS макета ничего не делает. Это означает, что свойство top не влияет на то, как отображается второй элемент.

Таким образом, второй элемент оказывается непосредственно под первым элементом, без промежутка между ними.

Как мы можем это исправить? Давайте перейдем к следующей позиции:

2.

Относительная

Позиция: относительная похожа на статическая в том, что относительно расположенные элементы будут следовать нормальному потоку веб-страницы. Но главное отличие состоит в том, что использование относительно теперь разблокирует другие свойства макета CSS.

Подумайте об этом так: вы устанавливаете положение элемента относительно других элементов на странице.

Давайте посмотрим, как это выглядит, и настроим наш CSS следующим образом:

 .первый {
   положение: статичное;
}
.еще один {
   положение: родственник;
   верх: 50 пикселей;
} 

Весь CSS точно такой же, за исключением того, что мы изменили второй элемент, чтобы использовать позицию : относительная . Это заставляет top: 50px работать!

Посмотреть исходный код на Codepen

Вы можете видеть, что второй элемент теперь на 50 пикселей ниже первого, добавляя это пространство между ними.

РЕКЛАМА

Относительно расположенные родительский и дочерний элементы

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

Вот HTML для этого:

 
<дел>

И наши стили CSS:

 .parent {
   положение: родственник;
}
.ребенок {
   положение: родственник;
   верх: 0px;
   слева: 0px;
} 

А вот как этот код будет выглядеть в реальной жизни:

Посмотреть исходный код на Codepen

Вы можете видеть, что розовый дочерний элемент хорошо вложен в фиолетовый родительский элемент. Дочерний элемент также располагается как можно ближе к верху и остается внутри родителя, насколько это возможно. (Он дойдет до родительского текста)

Относительная позиция относительно прямолинейна, верно? Что ж, держитесь за свои шляпы, потому что с позиция абсолютного все скоро сойдет с ума.

3. Абсолютный

Позиция: абсолютный приведет к удалению элемента из нормального потока веб-страницы.

Подождите, что это значит?

Итак, раньше при использовании статического или относительного позиционирования элементы красиво отображались один под другим, в зависимости от их порядка в HTML-разметке. Но при абсолютном позиционировании элемент полностью исключается из всего этого потока.

Чтобы помочь объяснить, давайте проведем сравнение, чтобы проиллюстрировать разницу между относительным и абсолютным позиционированием.

В предыдущем примере у нас был родительский элемент с дочерним элементом, оба расположены относительно друг друга. И дочерний элемент был вложен внутри родительского элемента.

Давайте изменим этот дочерний элемент так, чтобы он располагался абсолютно внутри родителя!

Теперь наш CSS будет выглядеть так:

 .parent {
   положение: родственник;
}
.ребенок {
   положение: абсолютное;
   верх: 0px;
   слева: 0px;
} 
Посмотреть исходный код на Codepen

Розовый дочерний элемент теперь сильно отличается от нашего последнего примера.

Хотя он все еще находится в пределах родительского элемента, он располагается в самом верху и очень слева от родителя. Он даже скрывает родительский текст!

Это связано со стилями top: 0px и left: 0px дочернего элемента в сочетании с абсолютным позиционированием дочернего элемента. В обычном потоке вещей элементы не должны быть поверх (и покрывать) другие элементы.

Но поскольку дочерний элемент является абсолютным, он находится на другом уровне, чем обычные элементы. Таким образом, его можно расположить поверх того, что есть на веб-странице.

Но он останется в границах родительского элемента, пока у родителя установлена ​​его позиция. Что приводит нас к следующему пункту.

Есть еще один сложный аспект дочерних элементов с абсолютным позиционированием…

РЕКЛАМА

Абсолютно позиционированный элемент должен позиционироваться относительно позиционированного предка.

Когда вы удаляете элемент из нормального потока с помощью position: absolute , он будет искать элемент-предок, у которого есть своя собственная позиция. Это делается для того, чтобы ребенок знал, по отношению к какому элементу он должен позиционировать себя.

Итак, что произойдет, если дочерний элемент имеет абсолютное позиционирование, а родительский элемент не имеет заданной позиции?

Вот наш CSS для этой иллюстрации:

 . parent {
   // Позиция не установлена, поэтому она статическая
}
.ребенок {
   положение: абсолютное;
   верх: 0px;
   слева: 0px;
} 

Вот как будет выглядеть результирующая веб-страница:

Посмотреть исходный код на Codepen

Теперь дочерний элемент вышел за пределы родительского элемента, так как родительский элемент не имеет заданной позиции. И дочерний элемент перешел к следующему (старшему) родительскому элементу, в данном случае к элементу dy>, который находится настолько далеко, насколько это возможно.

(Несколько грустной метафорой может быть то, что этот «осиротевший» ребенок ищет в дереве предков кого-то, кто станет его «родителем».)

Это огромная причина неожиданного поведения CSS для многих разработчиков.

Если вы всегда помните, что родительский элемент дочернего элемента должен иметь позицию , установленную на относительную или абсолютную (в большинстве случаев), вы избежите того, чтобы ваши дочерние элементы летали вверх по странице к тому, кто знает где?

Итак, резюмируем относительное и абсолютное позиционирование:

Основное различие между относительным и абсолютным позиционированием заключается в том, что position: absolute полностью выводит дочерний элемент из нормального потока документа. И этот дочерний элемент будет позиционироваться по отношению к первому родительскому элементу, для которого установлено собственное положение.

Последние два значения position , fixed и sticky , в чем-то похожи на позиция: абсолютная . Но они также связаны с вашей позицией прокрутки на странице.

Давайте посмотрим:

4. Фиксированный

Положение: фиксированный уберет элемент из нормального потока, а также поместит его в то же место в окне просмотра (то, что видно на экране). Это означает, что прокрутка никак не повлияет на его положение.

Давайте посмотрим, как это выглядит в коде. Вот наш HTML:

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit....
<дел>

И в нашем CSS мы установили для второго элемента значение position: fixed :

 .first {
   положение: родственник;
}
.еще один {
   положение: фиксированное;
   верх: 0px;
   слева: 0px;
} 

Вот как это будет выглядеть:

См. исходный код на Codepen

Зеленый фиксированный элемент останется в верхнем левом углу области просмотра. И если вы прокручиваете, фиолетовый элемент будет прокручиваться нормально, но зеленый элемент останется там, где мы его разместили.

Совет : Фиксированный элемент должен иметь верхнюю или нижнюю позицию. В противном случае его просто не будет на странице вообще.

Положение: фиксированное обычно используется для создания панелей навигации, которые всегда прикрепляются к верхней части. Это супер полезное свойство!

Далее мы рассмотрим липкое позиционирование, которое похоже на фиксированное позиционирование, но с небольшим дополнением.

РЕКЛАМА

5. Липкий

Позиция: липкая элементы изначально будут вести себя как позиция: относительные элементы, но если вы продолжите прокрутку, они будут вырваны из нормального потока и будут вести себя как позиция: фиксированная , где бы вы ни располагались их.

Это может быть очень полезно, если вы хотите прикрепить элемент, который изначально находится дальше вниз по странице, в верхнюю часть экрана.

В этом примере кода наш зеленый липкий элемент находится между двумя фиолетовыми элементами, содержащими много текста. (Тем лучше для прокрутки!)

 <дел>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit....
<дел> <дел> Lorem ipsum dolor sit amet, consectetur adipiscing elit....