При позиционировании (relative) элементов в контейнере происходит увеличение высоты контейнера. Как избежать нежелательной «растяжки»?

Question

[Елена Филонова]

Здравствуйте! "Рисую" общую картинку: на большую (центральную) накладываю разные элементы слева и справа. Использую relative позиционирование и z-индекс. Вроде получается неплохо, но вопрос вот один решить и понять не могу.
Сам контейнер (высота его) постоянно увеличивается с добавлением каждого нового элемента . (Это вроде более-менее понятно: высота складывается из высоты элементов контейнера. То есть, элементы должны ж по идее идти друг за другом и высота по умолчанию увеличивается сама на высоту каждого элемента.) Я их (некоторые из элементов) переношу вверх, используя позиционирование. Но само расстояние (по высоте), что они должны бы занимать на своем обычном месте - остается в контейнере. Образуется абсолютно некрасивое свободное пространство внизу.... Как его убрать?

Comments

[Ankhena]

Без вашего кода сложно что-то сказать, но такое ощущение, что вы используете relative вместо absolute

absolute выводит элемент из потока и позиционирует относительно ближайшего родителя с position отличным от static.

relative резервирует место где элемент был в потоке и сдвигает как бы его копию.

Поэтому, при использовании relative родительский блок увеличивается при добавлении новых элементов так, как он бы увеличивался при добавлении обычных, static, элементов.

Answer 1

[Андрей Федоров]

Скорее всего, вы неверно понимаете как работает позиционирование в css. Но сказать точно сложно без вашего кода.
Вот модельный пример - https://codepen.io/aliencash/pen/wvoOGrg?editors=1100
Как видно размеры внутренних блоков никак не влияют на размеры родителя, если они спозиционированы.

Comments

[Елена Филонова]

Спасибо Вам большое, Андрей. Конечно, неправильно скорее всего...((( Сама изучаю css и html. Сын дает практические задания - но на вопросы совсем не отвечает - требует самостоятельно искать ответы... Я каждый раз перерываю кучу сайтов и новых учебников. Но здесь совсем измучилась.... Уже какие сутки подряд пробую секцию правильно написать - но она увеличивается по высоте - с каждым добавленным элементом, несмотря на то, что я его точно переношу вверх и он появляется на нужном месте.

Попробую посмотреть пример Ваш. Может, и додумаюсь до чего самостоятельно...

[Елена Филонова]

Вот эту картинку делаю. На центральный блок накладываю текст, линию, блоки-круги, и т.д....
Объекты (слева вверху и снизу справа) точненько вроде и встают и размеры правильные. Но высота у меня самого контейнера - где расположена ВСЯ эта картинка - начинает увеличиваться...((( То есть добавляется расстояние по высоте ПОСЛЕ ВСЕЙ картинки (со всеми элементами наложенными) уже...

Андрей, если сможете пояснить отчего так происходит - буду ОЧЕНЬ благодарна Вам.

[Андрей Федоров]

Елена, эскиз - это хорошо. Сделать за вас - то же не проблема. Но без вашего кода нельзя сказать в чем ваша ошибка.

[Елена Филонова]

Андрей Федоров, БЛАГОДАРЮ!!! Я уже додумалась))) Делать за меня не нужно (сама хочу до всего дойти). Просто показала картинку общую. Что только центральный прямоугольник - картинка центровая. А то что с боков - круги, линии, тексты справа снизу и сверху слева - это всё отдельные элементы. Я их сначала рисовала и по элементам раскладывала, стилизовала, а потом - уже позиционировала. И всё у меня получилось. Только по высоте непонятки пошли: стало пустое пространство появляться.... То целая секция увеличивается снизу , то - в контейнер засуну - снизу контейнера словно поле увеличивается. Понять не могла - почему высота так "пляшет". Но я смогла сама решить эту проблему. Спасибо, что потратили на меня время. Очень благодарна Вам и впрямь!

Answer 2

[kryamk]

https://webref.ru/course/positioning/position

Answer 3

[Елена Филонова]

Додумалась я)))) Всю секцию - оставила в покое. А вот эту картинку - сделала отдельным контейнером (обволокла div-элементом). В этот контейнер и поместила: центровую картинку и все элементы (линии, круги, тексты) справа и слева, что на нее "накладываю". Там установила max-height и height: 100%; и перестала секция "растягиваться" по высоте. И в самом контейнере тоже - лишнее пространство снизу исчезло. Проверила на разных масштабах - размеры теперь по высоте не "пляшут": ни в секции, ни в контейнере с этими кошмарными картинками)))) Спасибо всем!

Просто боялась трогать высоту - везде не рекомендуют ею "играться" и с ней связываться. Раньше проблем-то и не было вроде. В первый раз с таким столкнулась....(((

Comments

[Елена Филонова]

Максим Ленский, БАГОДАРЮ Вас! Я - начинающий ученик))) Вообще - самообразование сплошное: сын из специалиста по внедрению и сопровождению программных комплексов переучивать меня взялся в новую область. А консультаций не даёт совсем практически: только учебники, и задания от него получаю... Вот и ищу инфу повсюду как совсем плохо становится))) Уж извините, что побеспокоила так...

А флексами я пыталась тоже - да запуталась в них с этим безобразием окончательно....((( Куча элементов и все их прорисовать сначала, а потом еще спозиционировать. Ей-Богу, чуть с ума не сошла))) По ночам уже снится как я их "двигаю" и рассовываю по классам и контейнерам всяким))))

[Елена Филонова]

Максим Ленский, пользуюсь RubyMine (если честно - других и не знаю. Сын его мне установил, и с самого начала пишу и создаю все задачи там). А по тому вопросу: да, я уже давно поняла, что разбивать нужно на группы, потом - подгруппы, и в самом конце уже элементы... Сначала макет разбиваю на секции, потом - уже работаю с самими секциями. Ну, и так далее: от блока к блоку... Рисую схемы сначала. Деревья, ветки... Потом уже только работаю с самими блоками мелкими...
Так и эту картинку прорисовывала: сначала прямоугольник, а потом уже блок справа сверху. Каждый элемент - отдельный, стилизация своя, позиционирование... Слева снизу который - уже полегче было: элементы одни и те же: заголовок, линия, кружок, кружок в кружке, абзац... Только позиционировала снизу уже по-другому. Всё и получилось. Все размеры чётко, все позиции на месте. Кроме высоты... Она у меня почему -то стала удлиняться: то есть пустое пространство снизу добавлялось. Пока я вот div-элементом ее не "усмирила")))
Что поделать... Трудно переквалифицироваться в таком возрасте... Практически самостоятельно. Без учителей....

[Елена Филонова]

Максим Ленский, буду Вам очень благодарна. Не откажусь нисколько! Вопросов уйма накопилось. Можем по зуму и по удаленке попробовать.
Только сегодня я уже очень устала: встаю в 6 утра, в семь уже засела. Только что закончила - ничего уже не соображаю)))
Прямо как скажете - с завтрашнего дня - с удовольствием выйду на связь. Когда Вам будет удобно? Очень Вам благодарна за помощь!

[Елена Филонова]

Максим Ленский, можно по почте договориться о времени встречи... Но буду очень-очень Вам благодарна даже за хоть малюсенькое занятие-консультацию. Самостоятельно очень долго и трудно приходится идти: много побочной информации цепляешь, пока найдешь ответ на обычный вопрос даже...(((