Как наложить блок на блок css

Наложение элементов — CSS: Позиционирование элементов

В уроке про плавающие элементы вы могли увидеть, что элементы HTML могут накладываться друг на друга. Такое же поведение было при выставлении позиционирования отличного от нормального. Наложением элементов можно управлять и с помощью CSS-свойства z-index . Из названия свойства можно увидеть, что речь идет об оси z .

Эта ось отвечает за то, какие элементы будут располагаться на переднем, а какие на дальнем плане. Попробуем использовать на трех блоках абсолютное позиционирование:

Возникнет естественный вопрос: «А где остальные два блока?». Они скрылись за последним блоком .block-three . Когда мы дали каждому блоку абсолютное позиционирование, то начали в одном и том же месте накладывать блоки друг на друга. Первым в угол встал блок .block-one , после этого у браузера возникла задача переместить блок .block-two ровно на это же место. Для этого он выставил приоритет по оси z второму блоку и наложил его на первый. Данная операция повторилась с последним блоком, и он занял видимую позицию, «заслонив» своих братьев.

При таком взаимодействии блоки никуда не исчезают из кода, это можно проверить, выставив разные свойства ширины и высоты для каждого из блоков:

Свойство z-index позволяет указать, какие элементы и в каком порядке будут накладываться друг на друга. Свойство принимает числовое значение, указывая слой, на котором будет расположен элемент. Чем больше число, тем выше элемент находится по оси z . Важно, что свойство z-index работает только с элементами, у которых установлено свойство position с одним из значений:

Важным для понимания моментом является то, как браузер по умолчанию позиционирует элементы:

1. Первым всегда идет элемент HTML. Поверх него накладываются все остальные элементы.
2. Далее идут все элементы в нормальном потоке документа. Элементы идут по всем правилам расположения блочных и строчных элементов. Они позиционируются в том порядке, в котором определены внутри HTML-документа.
3. В конце накладываются все элементы с position в том порядке, в котором они определены внутри HTML-документа. Это можно увидеть на примерах выше.

Попробуем поменять порядок элементов в последнем примере. Для этого установим второму и третьему блоку такие значения, чтобы они поменялись местами. Необходимо для блока .block-two установить значение z-index больше, чем у блока .block-three . В результате третий блок «исчезнет», так как имеет меньшие размеры:

Свойство z-index может принимать отрицательные, положительные значения и ноль. Здесь нет никакой магии и отрицательные значения будут находиться «ниже» положительных. В реальных проектах хорошей практикой считается установка значения z-index с шагом в 100 при достаточно больших значениях. Это делается для удобства чтения и правок стилей:

z-index: 34234; z-index: 43233; z-index: 34324; 

Определить, в каком порядке расположатся элементы, при таких значениях достаточно трудно. Необходимо вчитываться в каждую цифру. Сравните это с таким вариантом:

z-index: 34200; z-index: 43200; z-index: 34300; 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Как наложить блоки друг на друга html+css?

Пишу, что-то типо оригинального меню для сайта.
Нужно:
1. menu3 не сьезжало вниз. Но наезжало на menu2, потому-что hidden. Т.е. menu2 и menu3 — просто выпадающее меню.
2. obj должны быть максимально близко к синей шапке, чтобы это было меню, а не отдельная шапка.
Пример на фото

body < background: #ff0000; /*Тип фон*/ background-size: 100% 100%; margin: 0 0 0 0; background-attachment: fixed; >main < text-align: center; margin-top: 10px; margin-bottom: 10px; background: rgba(255,255,255, .8); border-radius: 16px; border-color: rgba(97, 70, 245, 0.7); border-width: 5px; border-style: solid; width: 60%; margin-left: 20%; height: 100%; margin-right: 20%; text-align: center; >.header1 < position: relative; height: 70px; border-radius: 10px 10px 0 0; background: rgba(104, 193, 255, 0.7); >.menu1 < width: 66.7%; height: 70px; margin-bottom: 0; padding-left: 0; margin-top: 0; float: right; >.menu2, .menu3 < width: 250px; height: 70px; margin-bottom: 0; padding-left: 0; margin-top: 0; background: rgba(0, 151, 255, .7); display: inline-block; visibility: hidden; position: relative; >.menu1 li:hover < transition: 0.5s; background-color: rgba(0, 126, 212, 0.7); >.menu2 li:hover, .menu3 li:hover < transition: 0.5s; background-color: rgba(117, 199, 255, 0.7); >li < height: 70px; width: 70px; float: right; font-size: 18px; display: block; font-weight: bold; line-height: 70px; >.name1 < /*название связано с тематикой*/ height: 300px; /*уменьшено для вида*/ margin-right: 30px; margin-left: 30px; >.menus < width: 400px; height: 70px; line-height: 70px; margin-left: 40%; >.obj1

named1.onmouseover = function(); named1.onmouseout = function(); menu2.onmouseover = function(); menu2.onmouseout = function(); named2.onmouseover = function(); named2.onmouseout = function(); menu3.onmouseover = function(); menu3.onmouseout = function();

• Вопрос задан более трёх лет назад
• 3109 просмотров

Комментировать
Решения вопроса 1
.menu2, .menu3 <
display:block;
position: absolute;
> Ответ написан более трёх лет назад
Нравится 1 8 комментариев
Антон Нечаев @PsyhoGhost Автор вопроса
Нет, они становятся на одном месте. И obj1 не на линии.
PsyhoGhost: я не совсем понимаю, что Вы хотите сделать.
Антон Нечаев @PsyhoGhost Автор вопроса
ziss: подправил. Пример вверху

body <
background: #ff0000; /*Тип фон*/
background-size: 100% 100%;
margin: 0 0 0 0;
background-attachment: fixed;
>

main text-align: center;
margin-top: 10px;
margin-bottom: 10px;
background: rgba(255,255,255, .8);
border-radius: 16px;
border-color: rgba(97, 70, 245, 0.7);
border-width: 5px;
border-style: solid;
width: 60%;
margin-left: 20%;
height: 100%;
margin-right: 20%;
text-align: center;
>

.header1 position: relative;
height: 70px;
border-radius: 10px 10px 0 0;
background: rgba(104, 193, 255, 0.7);
>

.menu1 width: 66.7%;
height: 70px;
margin-bottom: 0;
padding-left: 0;
margin-top: 0;
float: right;
>

.menu2, .menu3 width: 250px;
height: 70px;
margin-bottom: 0;
padding-left: 0;
margin-top: 0;
background: rgba(0, 151, 255, .7);
visibility: hidden;
position: absolute;
left:35%;
>
.menu3 margin-left:50%;
>
.menu1 li:hover transition: 0.5s;
background-color: rgba(0, 126, 212, 0.7);
>

.menu2 li:hover, .menu3 li:hover transition: 0.5s;
background-color: rgba(117, 199, 255, 0.7);
>

li height: 70px;
width: 70px;
float: right;
font-size: 18px;
display: block;
font-weight: bold;
line-height: 70px;
>

.name1 < /*название связано с тематикой*/
height: 300px; /*уменьшено для вида*/
margin-right: 30px;
margin-left: 30px;
>

.menus width: 400px;
height: 70px;
line-height: 70px;
position: absolute;
>

.obj1 display: inline-block;
height: 150px;
width: 100px;
text-align: center;
border-radius: 10px;
position: relative;
margin-bottom: 10px;
background: rgba(110,185,237, 0.75);
>

Наложение блоков друг на друга

На странице есть блок, который залезает под верхний блок. Т.е. красный налезает под черный. Как это было сделано: у красного блока position: relative , top: -50px и z-index: -1 . Теперь необходимо на красном блоке разместить кнопки, ссылки. Но т.к. у красного блока z-index: -1 , то кнопки не нажимаются. P.S. Красный обязательно должен быть фоном, а не картинкой. И кнопки должны располагаться внутри этого блока.

Отслеживать

user282693

задан 4 окт 2017 в 17:56

715 1 1 золотой знак 8 8 серебряных знаков 26 26 бронзовых знаков

Добавьте код или ссылку на сайт, так будет проще и правильный ответ получите быстрее)

10 авг 2018 в 7:21

Проблема тут с реализацией. В том, что нижний блок вообще налезает на верхний когда есть псевдоэлементы и бордеры

Как наложить блок на блок css

Основная особенность слоев и их основное отличие в использовании от других способов верстки — точное позиционирование и способность накладываться друг на друга. Благодаря этой особенности с помощью слоев можно создавать разные эффекты на веб-странице.

Существует несколько способов создания наложения. Самый простой из них, но при этом и менее гибкий — использование абсолютного позиционирования.

Абсолютное позиционирование

Абсолютное позиционирование позволяет накладывать слои в любом порядке друг на друга. Но при этом требуется знать точные координаты каждого слоя относительно одного из углов окна браузера, что не всегда возможно. Поэтому данный подход имеет ограниченную область применения, например для создания верхнего меню, когда его положение не меняется и точно зафиксировано.

При использовании наложения требуется присвоить свойству position значение absolute . Само положение слоя регулируется свойствами left , top , right и bottom которые задают координаты соответственно от левого, верхнего, правого и нижнего края (пример 1). Поскольку вывод содержимого слоя осуществляется в заданное место, то порядок описания слоев указывает и порядок их наложения друг на друга. Самый первый слой, приведенный в коде веб-страницы, будет располагаться на заднем плане, а самый последний — на переднем. Порядок также можно менять с помощью свойства z-index . Чем больше его значение, тем выше располагается текущий слой относительно других слоев.

Пример 1. Абсолютное позиционирование

В данном примере положение слоя с именем leftcol устанавливается в левом верхнем углу окна браузера, а слой rightcol смещен на 350 пикселов вправо от левого края окна и на 50 пикселов вниз. Заметьте, что значения left и top следует указывать обязательно для всех слоев, чтобы получилось нужное наложение с заданными координатами.

Более интересный подход к созданию наложения — использование относительного позиционирования. В этом случае слои можно размещать по центру окна браузера или располагать их в любом месте веб-страницы, не задумываясь уже над значением координат слоев.

Относительное позиционирование

Чтобы наложить один слой на другой и не привязываться жестко к координатной сетке, можно попробовать следующий подход. Для первого слоя, который будет располагаться на заднем плане, указываем абсолютное позиционирование, присваивая свойству position значение absolute . Второй слой, расположенный поверх первого, должен иметь относительное позиционирование, что достигается с помощью значения relative у свойства position . Положение верхнего слоя определяется от левого верхнего угла нижнего слоя заданием left и top (рис. 1).

Рис 1. Задание положения верхнего слоя

В примере 2 ширина слоев задается свойством width , а местоположение верхнего слоя (он называется rightcol ) свойствами left и top . Как указывалось выше, порядок наложения слоев определяется их порядком описания в коде или с помощью z-index . Поэтому слой с именем leftcol будет располагаться на заднем плане, поскольку он определен самым первым.

Пример 2. Относительное позиционирование

Существует и другой способ наложения слоев, который связан с относительным позиционированием и использует все разнообразие средств размещения разных слоев.

Универсальный подход

Теоретически, можно разместить слои по вертикали друг под другом и поднять нижний слой вверх с помощью свойства top , задавая ему отрицательное значение или с помощью bottom . На практике добиться подобного довольно сложно, ведь определить высоту слоя простыми средствами, а, следовательно, и величину, на которую следует смещать слой, не представляется возможным, поскольку она зависит от размера шрифта, содержимого слоя и многих других параметров. Проще отсчет координат вести от верхнего угла одного из слоев. Для этого следует разместить слои рядом по вертикали, а потом уже смещать один слой относительно другого.

Реализуется это следующим способом. У каждого слоя необходимо указать конструкцию float: left , которая позволяет один слой пристыковать к другому справа. Добавлять float следует для каждого слоя, иначе в некоторых браузерах появится промежуток между слоями.

Теперь слои располагаются рядом, и прежде, чем указывать координаты, задаем относительное позиционирование значением relative у свойства position . Положение верхнего слоя управляется значением left и top . Но поскольку отсчет координат в данном случае ведется от левого верхнего угла второго слоя, по горизонтали нужно указывать отрицательное значение (рис. 2). Впрочем, можно использовать также свойство bottom .

Рис. 2. Задание положения верхнего слоя

В примере 3 верхний слой с именем rightcol смещается на 50 пикселов по горизонтали и вертикали. Чтобы он не закрывал при наложении содержимое слоя leftcol , справа у текста делается отступ через свойство padding-right .

Как видно из примера, для создания наложения слоев требуется задать всего два свойства у нижнего слоя и четыре у верхнего. Остальные стилевые свойства управляют видом самих слоев и их содержимого.

Как расположить div поверх других блоков div?

Как расположить div поверх других блоков div? Чтобы было как на рисунке. Тот div, который нужен поверх других, выделен синим цветом (остальные — белые).

Используйте позиционирование CSS. В данном случае надо второму белому блоку задать свойство position: relative; , а синему блоку задать position: absolute; , чтобы он позиционировался относительно второго белого блока. Не забудьте указать top: 0; и left: 0; . Подробнее можно почитать здесь или здесь

используйте свойства position: absolute; и z-index: 100 (например 100, просто чтобы быть выше остальных) для позиционирования требуемого блока

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.4.14.41981

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Нужно наложить нижний блок на блок стоящий выше

Нужно #bg (в нем находится фон) поднять на #content. Пробывал писать для и для того и для другого:
position:relative; top:-150px/bottom:-150px;
Команды работают, и #bg поднимается. НО если я пишу эти правила для самого #bg, появляется отступ между #bg и #footer. Если пишу для #content отступ появляется между #content и #header. Есть у кого идеи по устранению данной проблемы.

Заранее благодарен за ответы.

Как наложить блок выше слоя scroll навигации
Здравствуйте уважаемые знатоки. Очередной раз прошу помощи в области web-дизайна. На этот раз.

Нужно чтобы нижний блок был ссылкой
Вопрос наверное глупый т.к. все делается почти наобум и фактически без знаний но. такая.

Смещаеться блок если на него наложить текст
Здраствуйте. Столкнулся с проблемой. Когда на блок с квадратом ложу текст, он почему-то смещаеться.

Bootstrap наложить один блок поверх другого
подскажите, как реализовать при помощи бутстрапа желательно вот такую систему. Чтоб один блок.

Site Builder

Сайто-Строитель.рф © 2013-2021
При копировании материалов активная ссылка на источник обязательна!

Cайто-Cтроитель.рф
Поиск по Сайту

Позиционирование и z-index в CSS. Часть-1.

Рано или поздно большинство веб мастеров при изучении CSS, сталкиваются с такими свойствами как позиционирование блоков и z-index, то есть отображение их поверх друг друга. На самом деле это очень удобные свойства, без которых невозможно было добиться в каскадных таблицах, таких эффектов как смена изображения, цвета, подсказки, при наведении. Также стоит отметить, что, пожалуй, сложно новичкам изучать все эти правила, прочитав возможности каждого из свойств по отдельности, а затем объединить в группу. Поэтому я и решил, так сказать разложить всё по полочкам и думаю за три средненьких статейки, мы уложимся и поймём друг друга. Прежде чем мы начнём, я предлагаю сразу открыть демо пример, перейдя по ссылке, или сделав клик по кнопки внизу статьи.

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

Создаём основной блок в position- relative.

И так для начала создадим основной блок и сразу же столкнёмся с таким позиционированием как «relative» (относительный), то есть в этом случае наш блок начнёт отображаться в том месте, где мы вставим код в HTML. Сначала пишу код блока в HTML.

Дальше для этого блока пишу правила CSS в отдельно созданном и подключённом файле. Здесь я указываю ширину, высоту, серый фон, бордюр, наружные отступы вокруг блока, и конечно наше позиционирование.

Пока наш блок не нуждается в « position: relative», но вот, в дальнейшем без него не обойтись. Теперь возвращаемся на страничку HTML и внутри блока «basic-layer» создаём шесть блоков. Первые три блока, будут отвечать за верхний слой, который будет эмитировать отключенный светофор, и при этом только отображать надпись, где какой цвет находится. Оставшиеся три блока, это основные цвета и надписи которые будут отображаться при наведении.

Внутренний блок position-absolute.

Абсолютное позиционирование (position-absolute), позволяет нам накладывать все блоки друг на друга, начиная от верхнего левого угла в том блоке, где мы хотим их разместить. В дальнейшем, нам придётся написать для каждого блока отдельное правило размещения, но пока создадим общее.

Здесь мы указали: позиционирование всех блоков, выравнивание содержимого, ширину, высоту, толщину цвет и тип бордюра, цвет текста, и радиус 100%, то есть сделали блоки круглыми. Если перейти в просмотр браузера, то там пока нечего интересного, создаётся впечатление, что в одном круглом блоке текст налегает друг на друга, и это хорошо, значит, все наши блоки отображаются. Теперь напишем правила, для трёх первых блоков, к каждому в отдельности (.layer .layer1 .layer2) в качестве примера выведу блок «.layer»:

Отображения блока поверх остальных или z-index.

Данное свойство z-index, позволяет нам управлять положением блоков друг над другом, начиная с нулевой отметке и по возрастающей. То есть чем больше число, тем преимущество накладываемого элемента возрастает. Лично на моём опыте, когда приходилось дорабатывать шаблоны, где уже для большинства элементов эти свойства были заданы, то приходилось выставлять даже минусовые отметки (например, z-index:-1;) и при этом всё работало успешно. Но сразу хочется отметить, что это свойство работает только с правилами позиционирования, absolute, fixed или relative. Если понятно то продолжим. И так мы видим, что мы задали для блока «layer» z-index: 1; то есть его положение изначально будет больше чем ноль. Далее делаем отступ 50рх сверху и 50 слева и задаём прозрачный фон. То же самое правило, мы создаём и для двух остальных блоков, только меняем отступы слева. Для « .layer1 » (left:270px;). Для « .layer2 » (left: 490px;). Задаём прозрачность фона 70% и теперь уже можем обновить браузер, для просмотра.

Рисунок №1.

Пока всё идёт как по маслу. Теперь напишем правила для трёх оставшихся блоков (.layer-red,.layer-yellow,.layer-green).

В качестве примера здесь выбран блок красного цвета. Как видим, z-index равен нулю, то есть будет, скрывается за первыми блоками. Отступы слева и сверху здесь точно такие же, как и в первых трёх блоках, ну это и понятно они должны лечь друг на друга. Какой должен быть цвет для каждого блока надеюсь здесь объяснять не надо. Но вот цвет текста должен быть такой же как и сам фон блока, что бы ни проявлялся до того момента пока мы его не вызовем. Конечно, если бы мы сделали закрывающий слой сплошным, тогда бы нам было всё равно какого цвета наш текст. И так создав правила последних трёх блоков идём в браузер.

Рисунок №2.

Ну, мне кажется всё ровно, всё сошлось, если нет, то подправьте. Далее теперь наша задача заставить провялятся, надписи и полный цвет задних блоков. Тут всё очень просто, используя псевдокласс «hover» мы должны сказать браузеру, что при наведении для блоков layer, layer1 и layer2, z-index будет ноль. Тут конечно много вариантов, но я нашёл вот такой.

Пришлось указывать для каждого класса отдельно псевдокласс, под один они не захотели работать. Следующим этапом завершающим, нам надо задать значение для псевдокласса с более высоким z-index например 1.

Как видите здесь, я ещё добавил, чёрный цвет текста и размер при наведении. Конечно для улучшения варианта, можно задать для каждого класса отдельный псевдокласс при наведении, где уже при необходимости подобрать свой цвет или размер, в зависимости от того что мы пытаемся отобразить. Но в качестве текста сойдёт и так. Идём в браузер для проверки своей работы.

Рисунок № 3.

Как видим, всё работает нормально. На этом, пожалуй, и закончим с первой частью. Во второй части мы немного поработаем с изображением, а точнее наложим текст на полупрозрачный фон.

Внимание. Уважаемые гости и пользователи! Скачать исходные материалы, всех трёх примеров «Позиционирование и z-index в CSS», вы можете в третьей части!

Похожие публикации:

1. Как изменить размер background image в css
2. Как выставить блоки в одну строку css
3. Как убрать отступы у блока в css
4. Как убрать рамку в css