Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 33 из 53 · 15 мин
static, relative, absolute, fixed, sticky и координаты top, right, bottom, left, inset.
Плашка «Хит» — в углу фото. А шапка не уезжает при прокрутке.
Это position. Плашка — absolute внутри relative, шапка — sticky.
positionstatic (обычно), relative, absolute, fixed, sticky.<style>
.photo { position: relative; height: 70px; background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; } .tag { position: absolute; top: 6px; right: 6px; background: #c8763a; color: white; padding: 2px 6px; }
</style>
<div class="photo">Фото ручка<span class="tag">Хит</span></div>relativetop/left. И главное — он становится опорой для absolute-детей.<style>
.a { position: relative; left: 20px; background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; }
</style>
<div class="a">Сдвинут на 20px</div><div style="background: #fdf6ec; border: 1px solid #c8763a; padding: 6px;">Соседу место не уступили</div>absolute<style>
.card { position: relative; height: 60px; background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; } .x { position: absolute; top: 4px; right: 6px; }
</style>
<div class="card">Окно<b class="x">×</b></div>fixedstickytop — дальше прилипает.<style>
.wrap { height: 90px; overflow: auto; } h4 { position: sticky; top: 0; background: #c8763a; color: white; margin: 0; padding: 4px; } p { margin: 4px 0 40px; }
</style>
<div class="wrap"><h4>Раздел 1</h4><p>Прокрути…</p><h4>Раздел 2</h4><p>Ещё…</p><p>…</p></div>top · right · bottom · leftposition не static.insetinset: 0 = top: 0; right: 0; bottom: 0; left: 0.<style>
.card { position: relative; height: 60px; background: #fdf6ec; border: 1px solid #c8763a; padding: 6px; } .shade { position: absolute; inset: 0; background: rgb(0 0 0 / .4); color: white; display: grid; place-items: center; }
</style>
<div class="card">Фото<div class="shade">Скоро</div></div>absolute ищет ближайшего предка с position — не забудь поставить ему relative.
Сделай .photo опорой (position: relative), а .tag поставь position: absolute с top: 8px и right: 8px.
Сделай header липким: position: sticky и top: 0.
Выберите один ответ.
Относительно чего ставится элемент с position: absolute?
Выберите один ответ.
Как ведёт себя position: sticky?
Введите короткий ответ без лишних пробелов.
Какое значение inset растягивает absolute-элемент на всю опору? Введи значение.
Проверяем состояние обучения…