От автора: если вы хотите создавать фантастические и уникальные визуальные впечатления в Интернете, вам в конечном итоге понадобятся два элемента, которые будут перекрываться или размещаться в одном месте. Возможно, вам даже нужно, чтобы они были расположены рядом или бок обок друг с другом. Давайте рассмотрим два разных способа сделать это: один с помощью свойства position, а другой с помощью CSS Grid.
Способ 1. Использование свойства Position
Возможно, вы уже знаете, что position: absolute; разместит что-то абсолютно на странице, где вы хотите, чтобы это было. В этом случае мы абсолютно позиционируем дочерний элемент в верхнем левом углу страницы. Независимо от того, где находится родитель, ребенок будет помещен в этот угол, абсолютно.
.child { ... position: absolute; top: 0; left: 0;
}Но это очень ненадежно! Что если вы разместите что-то на странице, а потом появится еще что-то? Может быть, у вас есть иконка меню навигации, которую вы хотите размещать в верхнем левом углу, но приходит третья сторона и вставляет рекламный баннер. (Я не защищаю рекламные баннеры, но они существуют.) Это перемещает меню навигации вниз, и теперь иконка располагается не на своем месте.
Или, скажем, вы хотите создать автономный компонент, который сможете использовать в нескольких местах. Вам нужно, чтобы он был повторно используемым и работал в своем собственном контексте, независимо от того, где вы его используете.
Если мы добавим position: relative; для родительского элемента, то все, что находится внутри него с position: absolute; будет размещено абсолютно по отношению к тому элементу, который это содержит!
.child { /* ... */ position: absolute; top: 0; left: 0;
} .parent { position: relative;
}Отлично. Мы можем использовать эту же предпосылку, если хотим разместить два элемента друг над другом. Здесь у нас будет два дочерних элемента, расположенных друг над другом с отступом в 150 пикселей. Мы увидим, что они теперь содержатся в том же родителе и останутся в нем.
<div class="parent"> <h2>Parent</h2> <div class="child child-1"> <h2>Child 1</h2> </div> <div class="child child-2"> <h2>Child 2</h2> </div> </div>
.child { position: absolute; top: 0;
} .child-1 { left: 0;
} .child-2 { left: 150px;
} .parent { position: relative;
}Это прием старой школы, но я использую его годами и он все еще актуален. Он работает согласованно во всех браузерах и может помочь вам разместить вещи даже в самых необычных и уникальных местах.
Способ 2. Использование CSS Grid
Еще одним хорошим способом наложения элементов или изменения их расположения является CSS Grid, в зависимости от того, насколько старые браузеры вы хотите поддерживать (что вы можете проверить с помощью caniuse). Мы можем поместить что-то, где нам нужно, в контейнере следующим образом:
.parent { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 150px 1fr;
} .child { grid-area: 1 / 1 / 2 / 2;
}И если один элемент должен накладываться с другим, мы можем поместить их в одну и ту же область сетки. Давайте также немного сместим их, используя поле.
.parent { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 150px 1fr;
} .child { grid-area: 1 / 1 / 2 / 2;
} .child-2 { margin-left: 200px;
}Если вам трудно визуализировать эту технику, я создала CSS Grid Generator, который, надеюсь, поможет вам увидеть вещи более четко.
Есть так много мест, где можно использовать эти методы! Вы можете создавать панели навигации. Вы можете создавать практически любой тип макета, в котором хотите более детально контролировать расположение элементов на странице.
Автор: Sarah Drasner
Источник: https://css-tricks.com
Редакция: Команда webformyself.