Блоки накладываются друг на друга
Всем привет!
Возникла проблема: блоки накладываются друг на друга. Левый, центральный, правый располагаются корректно относительно друг друга, а нижний блок (подвал) не хочет опускаться ниже левого (правого) блока.
Код и скрин прилагаю:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
html> head> meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> title>test/title> style> /* WRAPPER: wraps entire contents of page */ #wrapper < width: 760px; margin: 0 auto; border: 1px solid #86B500; >/* CONTENT WRAPPER */ #contentWrapper < position: relative; width: 100%; >/* MAIN CONTENT */ #main < margin-left: 145px; margin-right: 135px; padding: 0 15px 15px 20px; border: 1px solid #666666; >/* ЛЕВЫЙ СТОЛБЕЦ */ #leftSide < position: absolute; top: 0px; left: 0; width: 145px; >/* ПРАВЫЙ СТОЛБЕЦ */ #rightSide < position: absolute; top: 15px; right: 5px; width: 125px; >/* ПОДВАЛ */ #footer < background-color: #86B500; margin: 1px; >/style> /head> body> div id="wrapper"> div id="contentWrapper"> div id="main"> div id="banner"> h1>Content Wrapper/h1> /div> h2>Text/h2> p style="margin-bottom: 0;">Content Wrapper Content Wrapper Content Wrapper Content Wrapper Content Wrapper /p> /div> div id="leftSide"> p>Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side Left Side /p> /div> div id="rightSide"> p>Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side Right Side /p> /div> /div> p id="footer">Footer Footer Footer Footer Footer Footer /p> /div> /body> /html>
Свойство z-index
Свойство z-index устанавливает, кто будет сверху в случае, если несколько элементов накладываются друг на друга.
Синтаксис
Число должно быть целым, положительным или отрицательным. Может быть нулем.
Значения
| Значение | Описание |
|---|---|
| Число | Целое число задает порядок наложения элементов: при накладывании элементов друг на друга сверху окажется тот, у которого z-index больше. |
| auto | Порядок наложения строится автоматически: выше будет тот элемент, который расположен ниже в HTML коде. |
Значение по умолчанию: auto .
Пример
В данном примере блоки будут накладываться друг на друга в порядке их следования в HTML коде ( z-index не задан и будет иметь значение по умолчанию — auto ). Первый блок будет в самом низу (красный), а последний — выше всех (зеленый):
#div1 < position: absolute; top: 30px; left: 30px; width: 50px; height: 50px; background: red; >#div2 < position: absolute; top: 60px; left: 60px; width: 50px; height: 50px; background: blue; >#div3 < position: absolute; top: 90px; left: 90px; width: 50px; height: 50px; background: green; >
Пример
Поменяем порядок наложения, задав z-index . Красному блоку — 3 , голубому — 2 , зеленому — 1 . Порядок наложения поменяется на обратный (выше всех будет блок с z-index 3):
Наложение элементов — CSS: Позиционирование элементов
В уроке про плавающие элементы вы могли увидеть, что элементы HTML могут накладываться друг на друга. Такое же поведение было при выставлении позиционирования отличного от нормального. Наложением элементов можно управлять и с помощью CSS-свойства z-index . Из названия свойства можно увидеть, что речь идет об оси z .
Эта ось отвечает за то, какие элементы будут располагаться на переднем, а какие на дальнем плане. Попробуем использовать на трех блоках абсолютное позиционирование:
Возникнет естественный вопрос: «А где остальные два блока?». Они скрылись за последним блоком .block-three . Когда мы дали каждому блоку абсолютное позиционирование, то начали в одном и том же месте накладывать блоки друг на друга. Первым в угол встал блок .block-one , после этого у браузера возникла задача переместить блок .block-two ровно на это же место. Для этого он выставил приоритет по оси z второму блоку и наложил его на первый. Данная операция повторилась с последним блоком, и он занял видимую позицию, «заслонив» своих братьев.
При таком взаимодействии блоки никуда не исчезают из кода, это можно проверить, выставив разные свойства ширины и высоты для каждого из блоков:
Свойство z-index позволяет указать, какие элементы и в каком порядке будут накладываться друг на друга. Свойство принимает числовое значение, указывая слой, на котором будет расположен элемент. Чем больше число, тем выше элемент находится по оси z . Важно, что свойство z-index работает только с элементами, у которых установлено свойство position с одним из значений:
Важным для понимания моментом является то, как браузер по умолчанию позиционирует элементы:
- Первым всегда идет элемент HTML. Поверх него накладываются все остальные элементы.
- Далее идут все элементы в нормальном потоке документа. Элементы идут по всем правилам расположения блочных и строчных элементов. Они позиционируются в том порядке, в котором определены внутри HTML-документа.
- В конце накладываются все элементы с 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 студентов
Наши выпускники работают в компаниях:
Почему блоки накладываются друг на друга и пропадает текст?
У меня должно быть три блока, которые идут за другом. Внутри каждого из них – блок с текстом. Вот что получается у меня – отображается только один блок, текста вообще нигде не видно:
.groups_line < margin: 0 auto; padding-right: 40px; padding-left: 40px; >.line < width: 519px; height: 360px; margin-right: 4px; position: relative; display: inline-block; >.line:last-child < margin-right: 0px; >.first_group < background-image: url(https://i.postimg.cc/L8tyDfNC/13-2x.png); >.second_group < background-image: url(https://i.postimg.cc/QNRGnQJh/kaboompics-com-Woman-preparing-a-lunch-on-the-kitchen-table.png); >.third_group < background-image: url(https://i.postimg.cc/76fdKhC5/photo-1453822858805-7c095c06011e.png); >.border
beauty health lifestyle
FROM GRAPEFRUIT TO LEMONS TO ORANGES, CITRUS DOES YOU GOOD!
June 14, 2015
24
health
Также ссылка на codepen