Bdtjtk

I found a Polly pen on code pen I REALLY want to use as a background.
For some reason though it is topmost and I can not put my content on top of it.

Link to the code pen I am using

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

The above is a random div so stack will accept the codepen link

What I want is for a slightly translucent white box to be there to put buttons and content inside of BUT the div wont go on top of the polly and I cant work our why from the

if someone would help fix it that would be great.
(ps if you could explain how that would be amazing)

Sorry, I missed the fact that the pen was yours, I thought it was an example of the background you wanted. Looking at your CSS, the issue is that you have position: relative and you need position: absolute

The reason is because relative positioning is positioned relative to itself, in other words, it remains IN the flow and simply moves about relative to where it started. It also leaves space on the DOM where it once was. When you position absolute it takes it out of the flow and becomes positioned either relative to it's parent (if the parent is positioned) or relative to the document if the parent is not positioned or does not exist. It does not leave space behind, other elements will reposition themselves and fill that space.

In this case, your test element was below the target element, positioned as relative, and therefore remained in the flow - below the target. Had it been a child of the target element, it may have worked with relative positioning and z-index because it would have been positioned relative to it's parent div, which in that case, would be the background.

this works for me on your pen:

.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;

}

Note: the z-index needs only be higher than the target by +1 so i changed it. Hope this helps!

Try to change these rules as follows, I guess that's what you want:

html {

  background: radial-gradient(ellipse at center, #ff8300 0%, black 100%);

  overflow: hidden;

  height: 100%;

}



#bg{

  position: fixed;

  height: 100%;

}

The changed parts are position: fixed; for #bg (to make it cover the full window and enable the following DIV to be inside the window), and the height: 100% for html to stretch the gradient to full height (if you want that?)

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

In addition you could add z-index: -1 to #bg (currently not necessary), especially if you plan to add other elements on top of it.