Полли фон передний план не фон

Question

Я нашел ручку Полли на ручке кода, которую ДЕЙСТВИТЕЛЬНО хочу использовать в качестве фона.По какой-то причине, хотя он самый верхний, и я не могу поместить свой контент поверх него.

Ссылка на кодовое перо, которое я использую

<div id="bg"></div>

Вышеэто случайный div, поэтому стек будет принимать кодовую ссылку

Я хочу, чтобы там находился слегка полупрозрачный белый прямоугольник, чтобы размещать кнопки и содержимое внутри НО, div не будет помещаться поверх списка, и я не могупоработайте над нашими причинами из

, если кто-то поможет исправить это, было бы здорово.(ps, если бы вы могли объяснить, как это было бы удивительно)

Answer 1

Попробуйте изменить эти правила следующим образом, я думаю, это то, что вы хотите:

html {
  background: radial-gradient(ellipse at center, #ff8300 0%, black 100%);
  overflow: hidden;
  height: 100%;
}

#bg{
  position: fixed;
  height: 100%;
}

Измененные части position: fixed; для #bg (чтобы охватить полное окно и включить следующееDIV находится внутри окна) и height: 100% для html, чтобы растянуть градиент до полной высоты (если вы этого хотите?)

https://codepen.io/anon/pen/yGvEpx

Кроме того, вы можетедобавьте z-index: -1 к #bg (в настоящее время не требуется), особенно если вы планируете добавить другие элементы поверх него.

Answer 2

Извините, я упустил тот факт, что ручка была вашей, я подумал, что это пример фона, который вы хотели.Глядя на ваш CSS, проблема в том, что у вас есть position: relative, и вам нужно position: absolute

Причина в том, что relative позиционирование позиционируется относительно себя , другими словами,он остается в потоке и просто движется относительно того, где он начался.Это также оставляет место на DOM, где это когда-то было.Когда вы позиционируете absolute, он извлекает из потока и позиционируется либо относительно своего родителя (если родительский позиционирован) , либо относительно документа, если родитель не являетсяпозиционируется или не существует.Это не оставляет места позади, другие элементы будут перемещаться и заполнять это пространство.

В этом случае ваш тестовый элемент был ниже целевого элемента, расположенного как relative, и поэтомуостался в потоке - ниже цели.Если бы это был дочерний элемент целевого элемента, он мог бы работать с относительным позиционированием и z-index, потому что он был бы позиционирован относительно родительского элемента div, который в этом случае был бы фоном.

это работает для меня на вашей ручке:

.Card{
  position: absolute;
  top: 110px; 
  left: 50%;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  color: white;
  z-index: 2;
}

Примечание: z-индекс должен быть только выше цели на + 1, поэтому я изменил его.Надеюсь, это поможет!