Проблема с z-индексом

Проблема в том, что #one перекрывается с #three. Почему z-index не работает?

#one {
  position: relative;
  top: 35px;
  z-index: 2;
}

<div id = "one">one</div>
<div>two</div>
<div id = "three">three</div>

как далеко вы указали z-index? попробуйте что-нибудь выше 99.

— 31.05.2018 06:49

проверьте этот пример jsfiddle.net/r1yvga44, он работает даже в вашем коде.

— 31.05.2018 06:51

z-index работает в вашем коде. «один» и «три» перекрываются, потому что они расположены в одном и том же месте, поскольку вы указали значения position и top для «единицы». Если вы добавите background-color в #one, вы увидите, как работает z-idex

— 31.05.2018 07:04

А в чем вроде проблема? Все работает как надо ...

— 31.05.2018 09:02

Если вы не хотите, чтобы они перекрывались, просто удалите CSS. Все работает как положено.

— 31.05.2018 09:04

css z-index

31.05.2018 06:47

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

<html>
<head>
<title>Page Title</title>
<style>#one{position:relative; top:35px; z-index: 1;background:white}
#three{
z-index:-3; background:white}
</style>
</head>
<body>

       <div id = "one">one</div>
       <div>two</div>
       <div id = "three">three</div>
   </body>
</html>

31.05.2018 07:07

Другие вопросы по теме

Изменение zIndex слоя данных google.maps.Data не отражается на карте

Как z-index работает в полноэкранном режиме?

C# WPF - проблема SetZIndex UserControl

Не могу скрыть ссылку с z-index

Взаимодействие с элементом HTML ниже без изменения z-индексов

Z-index, похоже, не работает

Z-index и порядок наложения

Z-index только на iOS (Safari и Chrome) не работает (контент отображается позади)

Два полноразмерных HTML-элемента перекрываются, но оба должны быть интерактивными

Блокирует расширяющуюся проблему с z-index

Проблема с z-индексом

Ответы 1

Другие вопросы по теме

Похожие вопросы