CodeBase | Frontend
2.14K subscribers
381 photos
150 videos
5 files
569 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
👩‍💻 Как работает свойство position: sticky в CSS?

Свойство 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 в CSS и зачем оно используется?

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
👍52🔥1
Наглядный CSS

Год
: 2018
Автор: Грег Сидельников
Язык: Русский

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

#CSS #Ru

CodeBase | Frontend | #book
👍41🔥1
⚙️ Что такое свойство object-fit в CSS и зачем оно используется?

Свойство 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