Позиционирование относительно родительского блока

@shmdarya · Регистрация: 31.10.2016

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

Здравствуйте!
Есть родительский блок и два дочерних. Задача: синий блок расположить в правом верхнем углу зеленого блока. Желтый блок разместить в правом нижнем углу, так, чтобы желтый элемент выходил за пределы зеленого блока на 30 пикселей по горизонтали и 30 по вертикали. И, наконец, сместить зеленый блок вправо на 40 пикселей.

исходный код

HTML5

<div>
            <div class="third-parent">
                <div class="blue"></div>
                <div class="yellow"></div>
            </div>              
        </div>

CSS

.third-parent {
            height: 400px;
            background: green;
            max-width: 700px;
            border: 5px solid black;
        }
 
        .blue {
            width: 50px;
            height: 50px;
            background: blue;
        }
 
        .yellow {
            width: 50px;
            height: 50px;
            background: yellow;
        }

Решение:

CSS

.third-parent {
            height: 400px;
            background: green;
            max-width: 700px;
            border: 5px solid black;
            position: relative;
            left: 40px;
 
        }
 
        .blue {
            width: 50px;
            height: 50px;
            background: blue;
            position: absolute;
            right: 0;
            top: 0;         
 
        }
 
        .yellow {
            width: 50px;
            height: 50px;
            background: yellow;
            position: absolute;
            right: -30px;
            top: 380px;
 
        }

При изменении высоты блока third-parent, с желтым квадратом явно что-то не так, как исправить эту ситуацию?
Спасибо.

@mrtoxas · 10.11.2016, 00:49

Используйте стиль bottom вместо top для желтого блока.

@shmdarya · 10.11.2016, 08:27 **[ТС]**

использовала, при этом желтый блок перемещается наверх

@mrtoxas · 10.11.2016, 09:02

shmdarya,

CSS

.yellow {
  width: 50px;
  height: 50px;
  background: yellow;
  position: absolute;
  right: -30px;
  bottom: -30px;
}

@shmdarya · 10.11.2016, 09:12 **[ТС]**

mrtoxas, Благодарю.

Новые блоги и статьи
Из чего и как собрать свой домашний кинотеатр bt_guru 21.01.2025 Создание домашнего кинотеатра: от идеи до реализации В современном мире домашний кинотеатр стал неотъемлемой частью комфортного жилого пространства, предоставляя возможность наслаждаться. . .	Ошибки стиральных машин bt_guru 21.01.2025 Современные стиральные машины представляют собой сложные электронные устройства, оснащенные множеством датчиков и систем контроля. Они способны самостоятельно определять вес загруженного белья,. . .	Копирование (маппинг) объектов в JavaScript bytestream 21.01.2025 В современной разработке программного обеспечения копирование объектов представляет собой фундаментальную операцию, которая требует особого внимания и понимания. Маппинг объектов в JavaScript – это. . .	Как работать с Apache Kafka в C# .NET bytestream 21.01.2025 Apache Kafka представляет собой распределенную платформу потоковой передачи данных, которая произвела революцию в области обработки больших объемов информации в реальном времени. Эта система,. . .	Как использовать RabbitMQ в C# .NET bytestream 21.01.2025 RabbitMQ представляет собой мощный брокер сообщений, который эффективно решает эту задачу, обеспечивая надежную передачу данных между множеством приложений. Этот инструмент реализует протокол AMQP. . .	Как объединить последние коммиты в Git bytestream 21.01.2025 В мире разработки программного обеспечения система контроля версий Git стала незаменимым инструментом для управления исходным кодом. Одной из наиболее полезных, но порой сложных для освоения функций. . .
Как запушить новую локальную ветку (branch) в удалённый репозиторий Git и отслеживать её bytestream 21.01.2025 В современной разработке программного обеспечения система контроля версий Git стала неотъемлемым инструментом для эффективного управления кодом и организации командной работы. Одной из ключевых. . .	Как создать директорию и все родительские директории, указанные в пути, с помощью Python bytestream 21.01.2025 Python предоставляет мощные инструменты для работы с файловой системой через встроенные модули os и pathlib, которые значительно упрощают процесс манипуляции директориями. Эти модули содержат. . .	Как работать с массивами в JavaScript bytestream 21.01.2025 Массивы в JavaScript представляют собой один из фундаментальных типов данных, который позволяет хранить упорядоченные коллекции различных элементов в одной переменной. Эта структура данных является. . .	Какая максимальная длина адреса (URL) в различных браузерах и стандартах bytestream 21.01.2025 В современном мире интернет-технологий URL-адреса (Uniform Resource Locator) играют фундаментальную роль в функционировании веб-пространства. Эти уникальные идентификаторы ресурсов стали неотъемлемой. . .	Как сбросить локальный репозиторий до состояния удалённого репозитория Git bytestream 21.01.2025 При разработке программного обеспечения с использованием системы контроля версий Git разработчики часто сталкиваются с необходимостью синхронизации локального и удаленного репозиториев. Данная задача. . .	Как запретить подсветку выделенного текста с помощью CSS bytestream 20.01.2025 Подсветка текста при выделении является стандартным поведением браузера, которое не всегда соответствует дизайнерским решениям или функциональным требованиям веб-приложения. Выделение текста может. . .

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.11.2016, 00:49	2
	Используйте стиль `bottom` вместо `top` для желтого блока. 0

@shmdarya 0 / 0 / 0 Регистрация: 31.10.2016 Сообщений: 74
	10.11.2016, 08:27 [ТС]	3
	использовала, при этом желтый блок перемещается наверх 0

@shmdarya 0 / 0 / 0 Регистрация: 31.10.2016 Сообщений: 74
	10.11.2016, 09:12 [ТС]	5
	mrtoxas, Благодарю. 0