Контейнер игнорирует наличие вложенного блока с position:absolute

@MuqpucToqpeJIb · Регистрация: 22.12.2015

Студворк — интернет-сервис помощи студентам

Доброго времени уважаемые форумчане. Сегодня я столкнулся с большой проблемой. Есть некий сайт.
На главной странице есть блок. Внутри блока есть 3 элемента div с картинками в нутри.

HTML5
1
2
3
4
5
6
<div class='content-inner'>
<div class='first-column'><img src='image/test.jpg' class='img' href='#'></div>
<div class='second-column'><img src='image/column-three.png' class='imgs'></div>
<div class='third-column'><img src='image/column3.png' class='imgt'></div>
<div class='pop'><img src='image/column3.png' class='popup'></div>
</div>

Выровнил блоки, указав им свойства

CSS
1
2
3
position:absolute;
top:0;
right:0;

Задал цвет фона родительскому блоку, все хорошо вроде бы... Но, есть некий JS скрипт, который меняет размеры этим блокам при определеных манипуляциях. И получается так, что когда первый блок, у которого не задано свойство position уменьшается, уменьшается и родительский блок, урезается фон, и полуается будто остальные два div вываливаются... Как можно это решить не указывая конкретного значения height родительскому блоку
Вот CSS

CSS
1
2
3
4
5
.content-inner{background-color:#292929; width:100%; position:relative;}
.content-inner .first-column {margin-top:-16px;}
.content-inner .first-column .img {width:784px;}
.content-inner .second-column{position:absolute; right:0px; top:0px;}
.content-inner .third-column{position:absolute; right:0px; bottom:0px;}

А вот скрины

Картинки некоторые будут больше... Сообственно, надо что бы родительский div content-inner растягивался...

p.s. На скрине. first-column =кухня second-column=Дверь third-column= бруски, Это что бы понятно было

@mrtoxas · 16.11.2016, 15:52

Когда вы задаете блоку абсолютное позиционирование, родитель этого блока перестает его "видеть". Поэтому у вас и получается, что высота родителя зависит от высоты того блока, который он "видит".
Можно сделать контейнер, разделить его на две части, в левой части будет большое изображение, а в правой - два маленьких. И не надо будет прибегать к позиционированию.

@newJS · 16.11.2016, 16:17

Дать родителю relative, и он увидит абсолюты.

@mrtoxas · 16.11.2016, 16:27

newJS, нет. Относительное позиционирование мы задаем блоку, чтобы позиционировать относительно него вложенные absolute-блоки. Не более. Блок с абсолютным позиционированием невидим для своего родителя.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 01.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 31.01.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	16.11.2016, 15:52
	Когда вы задаете блоку абсолютное позиционирование, родитель этого блока перестает его "видеть". Поэтому у вас и получается, что высота родителя зависит от высоты того блока, который он "видит". Можно сделать контейнер, разделить его на две части, в левой части будет большое изображение, а в правой - два маленьких. И не надо будет прибегать к позиционированию. 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	16.11.2016, 16:17
	Дать родителю relative, и он увидит абсолюты. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	16.11.2016, 16:27
	newJS, нет. Относительное позиционирование мы задаем блоку, чтобы позиционировать относительно него вложенные absolute-блоки. Не более. Блок с абсолютным позиционированием невидим для своего родителя. 0