Fixed против Sticky: Как определить элементы в CSS
Изучая CSS, вы откроете для себя множество свойств, которые помогут вам создавать отличные веб-сайты.
Хорошим примером, часто используемым в CSS, является свойство position. Это может принимать 5 различных значений: static, relative, fixed, absolute и sticky. Сегодня мы рассмотрим создание fixed и sticky элементов и то, как они ведут себя на странице.
Чтобы лучше понять этот урок, вы должны быть в состоянии определить, что такое CSS и как вы можете добавить CSS в свой HTML.
Также хорошо иметь базовый опыт работы с редактором исходного кода, таким как Visual Studio Code, но это зависит только от вас.
Структура
Откройте нужный вам редактор и создайте HTML-файл, например structure.html. Начните набор текста с ! а затем нажмите кнопку Enter (если вы находитесь в VSC), в противном случае просто скопируйте и вставьте это в свой файл.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed vs sticky</title>
</head>
<body>
<!--code will come here-->
</body>
</html>После тега title свяжите таблицу CSS с вашим HTML и создайте файл стиля style.css.
<link rel="stylesheet" href="style.css">Далее мы собираемся создать два элемента div. В первом мы определим fixed элемент, а во втором - sticky элемент.
<div class="example">
<div>
<div class="example">
<div>Имея базовую структуру страницы, давайте также добавим базовый стиль, необходимый в CSS, прежде чем перейти к следующему шагу.
body {
/*using flex display for a flexible responsive layout structure; therefore, there will be no need to use float or positioning*/
display: flex;
/*feel free to set any other color of your choice*/
background-color: grey;
}
.example {
width: 100%;
}Элемент Fixed
В первом div, созданном выше, мы собираемся добавить структуру, которая будет спроектирована с помощью fixed элемента.
<div class="example">
<div class="box fixed">This is fixed</div>
<div class="content one"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>Переключившись на таблицу CSS, добавьте следующий код:
.content {
background-color: blueviolet;
height: 200px;
margin: 1rem;
}
.content-one {
height: 100px;
}
.box {
width: 300px;
height: 100px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.fixed {
position: fixed;
top: 24px;
left: 24px;
}Для sticky элемента вам не придется так много добавлять. Разработанные выше классы (за исключением последнего) также будут определять следующую часть проекта.
Элемент Sticky
Для второго div давайте определим код в нашем HTML-файле следующим образом:
<div class="example">
<div class="content one"></div>
<div class="content"></div>
<!--placing the sticky box as third to better visualize the difference between the 2-->
<div class="box sticky">This is sticky</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>Помните весь CSS-стиль из фиксированного элемента? Если вы взглянете на это, вы заметите, что общие классы для элементов уже определены.
Все, что осталось, это добавить определенный стиль для .sticky.
.sticky {
position: sticky;
margin: 24px;
top: 24px;
}Окончательный код
Итак, что же мы создали.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed vs sticky</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--structure of fixed-->
<div class="example">
<div class="box fixed">This is fixed</div>
<div class="content one"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<!--structure of sticky-->
<div class="example">
<div class="content one"></div>
<div class="content"></div>
<!--placing the sticky box as third to visualize the difference between these two-->
<div class="box sticky">This is sticky</div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</body>
</html>body {
display: flex; /*using flex display for a flexible responsive layout structure; therefore, there will be no need to use float or positioning*/
background-color: grey; /*feel free to set any other color of your choice*/
}
.example {
width: 100%;
}
.content { /*these are properties for all the elements that have the class content*/
background-color: blueviolet;
height: 200px;
margin: 1rem;
}
.content-one {
height: 100px;
}
.box {
width: 300px;
height: 100px;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.fixed {
position: fixed;
top: 24px;
left: 24px;
}
.sticky {
position: sticky;
margin: 24px;
top: 24px;
}Теперь вы лучше понимаете, как можно использовать fixed и sticky элементы в CSS. Поиграйте с ними, чтобы создать fixed меню или sticky нижний колонтитул - возможности безграничны.
