Элементы с установленным z-index не перекрывают друг-друга

@eugenex · Регистрация: 19.08.2014

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

Div с классом round-div должен располагаться над картинкой с классом under_div, но вместо этого он вытесняет ее вниз. Позиционирование для обоих элементов задал относительное.

HTML5

<table width="100%">
<tr>
<td style="width:60%;height:170px;">
...
</td>
<td style="height:170px;">
<div class="round-div"></div>
<img class="under_div" src="images/1.jpg"/>
</td>
</tr>
</table>

CSS

.round-div {
    position:relative;
    top:0;
    left:0;
    width:170px;
    height:170px;
    z-index:9;
    -webkit-border-radius:60px;
    -moz-border-radius:500px;
    border-radius:900px;
    border:104px solid #fafafa;
    border-image:none;
}
.under_div {
    position:relative;
    top:0;
    left:0;
    z-index:1;
}

@Fedor92 · 20.10.2015, 13:10

eugenex, неправильно наверстали html... Тег картинки должен быть внутри дива...

Кликните здесь для просмотра всего текста

HTML5

<table width="100%">
<tr>
<td style="width:60%;height:170px;">
...
</td>
<td style="height:170px;">
<div class="round-div">
<img class="under_div" src="https://www.cyberforum.ru/images/1.jpg" />
</div>
</td>
</tr>
</table>

А стоп Вам же надо, чтобы round был над картинкой... Тогда обоим дивам задавайте абсолютное позиционирование без вложенности картинки в див...

@eugenex · 20.10.2015, 13:22 **[ТС]**

Тогда обоим дивам задавайте абсолютное позиционирование без вложенности картинки в див...

Да, это помогло + относительное позиционирование для td.

@Fedor92 · 20.10.2015, 13:24

Сообщение от eugenex

+ относительное позиционирование для td.

eugenex, да совершенно верно... Если Вы преследуете цель разместить картинку в каком-то конкретном месте..

Новые блоги и статьи
Как программировать под HCL Notes и создавать свои продукты на ее основе InfoMaster 11.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой мощную платформу для разработки корпоративных приложений, которая сочетает в себе функции электронной почты, календаря,. . .	Как работать с SVN (Subversion) InfoMaster 11.01.2025 Введение Система контроля версий является неотъемлемой частью современного процесса разработки программного обеспечения. Она обеспечивает управление изменениями в коде, позволяет отслеживать. . .	Использование GraphQL в JavaScript InfoMaster 11.01.2025 Введение в GraphQL и его преимущества В современной разработке веб-приложений эффективный обмен данными между клиентом и сервером играет ключевую роль. GraphQL представляет собой язык запросов и. . .	Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .
Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .

@eugenex 1 / 1 / 1 Регистрация: 19.08.2014 Сообщений: 96
	20.10.2015, 13:22 [ТС]	3
	Тогда обоим дивам задавайте абсолютное позиционирование без вложенности картинки в див... Да, это помогло + относительное позиционирование для td. 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	20.10.2015, 13:24	4
	Сообщение от eugenex + относительное позиционирование для td. eugenex, да совершенно верно... Если Вы преследуете цель разместить картинку в каком-то конкретном месте.. 0