Проблема с помещением div над другим div

Перед тем, как дать отрицательный голос или поставить вопрос как дубликат, сначала прочтите этот вопрос.Проблема с помещением div над другим div

У меня возникла проблема с размещением одного div под другим. Я знаю, что люди задают этот вопрос здесь, и я прочитал их все, а также попробовал все, но никто из них не работал для меня.

Каждый день, чтобы дать position: relative, чтобы делиться, а затем дать один выше z-index и еще ниже. Никто из них не работал для меня. Итак, я здесь за помощью.

В моем проекте (http://loadtest.isaumya.com/) У меня 2 дивы т.е.

<body> 
<div class="conteiner">blah blah blah</div> 

<div id="particle-js"></div> 
</body>

Я хочу поставить <div id="particle-js"></div> позади контейнера, но ничего не получается. Так что, пожалуйста, помогите.

источник

2014-12-28 iSaumya

Вы заказали их плохо:

<div class="container">...</div> 
<div id="particles-js">...</div>

инвертировать позиции:

<div id="particles-js">...</div> 
<div class="container">...</div>

имеет смысл, так как вы хотите, чтобы ваши полноэкранные частицы холст, чтобы быть естественно г-индекс ниже, чем последний #контейнер. Правило приоритета.

также добавить эти стили для вашего particle-js элемента:

#particles-js{ 
    position:absolute; 
    top:0; 
    width:100%; 
    height:100%; 
}

Если выше еще не помогает (он должен) добавить:

.container { 
    position: relative; 
    z-index: 1; 
}

Сделайте свой canvas элемент display:block;

Результаты поиска:

enter image description here

источник

2014-12-28 18:09:49

Эй, человек. Большое спасибо за ответ. Но я сделал это, все еще не показывая, как скриншот, который вы опубликовали. Проверьте страницу еще раз. Ты увидишь. Я сделал все, что вы сказали. – iSaumya

@iSaumya вы НЕ устанавливали позицию: абсолютный элемент 'particle-js'. Как только я установил положение: абсолютное; это хорошо показывает. Убедитесь, что JS не мешает вашим стилям. Используйте элемент проверки консоли. Играть с этим. –

@iSaumya Заметьте, что ваш идентификатор элемента '# particle-js' (с множественным числом 's', а не' particle-js, как вы писали') !! –

его просто очень простая концепция, вы должны помнить о позиции в CSS

Относительный позиционируемый элемент позиционируется относительно его нормального положения

Абсолютное положение элемент позиционируется относительно первого родительского элемента , который имеет положение, отличное от статического.

JSFiddle

это то, как вы можете решить эту проблему:

<body> 
<div class="container">blah blah blah</div> 

<div id="particle-js"></div> 
</body>

и CSS

div { 
    width: 100px; 
    height: 100px; 
} 

.container { 
    position: absolute; 
    background-color: blue; 
    z-index: 1; 
} 

#particle-js { 
    position: absolute; 
    background-color: red; 
}

сделать элемент z-index выше для wichever вы хотите быть отображены наверх

источник

2014-12-28 18:36:34

лучше избегать значений 'z-index' больше 3-4. использование -4..4 достаточно – lolbas

@lolbas yep, его просто уродливый habbit, который у меня есть;) –

@lolbas Некоторые старые браузеры имеют проблемы с отрицательным индексом z. 0-99999 - уровень жизни;) –

Проблема с помещением div над другим div

ответ

Смежные вопросы