Свойство
position: sticky
позволяет элементу переключаться между относительным и фиксированным позиционированием в зависимости от его прокрутки. Оно фиксирует элемент в определённой точке, пока его родительский контейнер находится в пределах видимости.<div class="container">
<h2 class="sticky-header">Я остаюсь на месте!</h2>
<p>Содержимое...</p>
<p>Содержимое...</p>
<p>Содержимое...</p>
</div>
<style>
.container {
height: 200px;
overflow: auto;
border: 1px solid black;
}
.sticky-header {
position: sticky;
top: 0; /* Фиксирует элемент у верхнего края контейнера */
background-color: lightblue;
padding: 10px;
}
</style>
.sticky-header
остаётся на месте, пока пользователь прокручивает содержимое контейнера. Как только прокрутка выходит за пределы контейнера, элемент снова становится относительным.Свойство sticky удобно для создания фиксированных заголовков таблиц, меню и других интерфейсных элементов, которые должны оставаться видимыми в пределах их контейнера.
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
z-index
управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.Работает только с элементами, у которых задано
position
(relative, absolute, fixed или sticky).<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>
<style>
.box {
position: absolute;
width: 200px;
height: 100px;
color: white;
padding: 10px;
}
.box1 {
background: #888;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
background: #e74c3c;
top: 80px;
left: 80px;
z-index: 2;
}
</style>
.box2
перекрывает .box1
, потому что у неё z-index: 2
.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2🔥1
Наглядный CSS
Год: 2018
Автор: Грег Сидельников
Язык: Русский
Вместо бесконечных томов документации – две с половиной сотни иллюстраций помогут вам разобраться во всех тонкостях работы CSS. Эта книга станет вашим настольным справочником, позволяя мгновенно перевести пожелания заказчика и собственное видение в компьютерный код!
#CSS #Ru
CodeBase | Frontend | #book
Год: 2018
Автор: Грег Сидельников
Язык: Русский
Вместо бесконечных томов документации – две с половиной сотни иллюстраций помогут вам разобраться во всех тонкостях работы CSS. Эта книга станет вашим настольным справочником, позволяя мгновенно перевести пожелания заказчика и собственное видение в компьютерный код!
#CSS #Ru
CodeBase | Frontend | #book
👍4❤1🔥1
Свойство
object-fit
управляет тем, как изображение или видео вписывается в контейнер.Аналог
background-size
, но для тега <img>
и <video>
.<div class="wrapper">
<img src="image.jpg" alt="пример">
</div>
<style>
.wrapper {
width: 300px;
height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4