Polly background is foreground not background

Multi tool use
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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)
javascript html css css3
add a comment |
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)
javascript html css css3
position your content as absolute and give it a z-index larger than the background's z-index. if this fails, then come back with some code to show what you tried.
– HolyMoly
Jan 3 at 22:09
#bg
is on top - you don't need thez-index
but you do need content or at leastheight
andwidth
– ic3b3rg
Jan 3 at 22:13
@HolyMoly I have a z-index for both divs. they both have either content or a height
– Richard Manning
Jan 3 at 22:36
add a comment |
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)
javascript html css css3
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)
javascript html css css3
javascript html css css3
edited Jan 4 at 1:10
Johannes
37.8k103471
37.8k103471
asked Jan 3 at 22:06
Richard ManningRichard Manning
85
85
position your content as absolute and give it a z-index larger than the background's z-index. if this fails, then come back with some code to show what you tried.
– HolyMoly
Jan 3 at 22:09
#bg
is on top - you don't need thez-index
but you do need content or at leastheight
andwidth
– ic3b3rg
Jan 3 at 22:13
@HolyMoly I have a z-index for both divs. they both have either content or a height
– Richard Manning
Jan 3 at 22:36
add a comment |
position your content as absolute and give it a z-index larger than the background's z-index. if this fails, then come back with some code to show what you tried.
– HolyMoly
Jan 3 at 22:09
#bg
is on top - you don't need thez-index
but you do need content or at leastheight
andwidth
– ic3b3rg
Jan 3 at 22:13
@HolyMoly I have a z-index for both divs. they both have either content or a height
– Richard Manning
Jan 3 at 22:36
position your content as absolute and give it a z-index larger than the background's z-index. if this fails, then come back with some code to show what you tried.
– HolyMoly
Jan 3 at 22:09
position your content as absolute and give it a z-index larger than the background's z-index. if this fails, then come back with some code to show what you tried.
– HolyMoly
Jan 3 at 22:09
#bg
is on top - you don't need the z-index
but you do need content or at least height
and width
– ic3b3rg
Jan 3 at 22:13
#bg
is on top - you don't need the z-index
but you do need content or at least height
and width
– ic3b3rg
Jan 3 at 22:13
@HolyMoly I have a z-index for both divs. they both have either content or a height
– Richard Manning
Jan 3 at 22:36
@HolyMoly I have a z-index for both divs. they both have either content or a height
– Richard Manning
Jan 3 at 22:36
add a comment |
2 Answers
2
active
oldest
votes
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!
add a comment |
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.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030449%2fpolly-background-is-foreground-not-background%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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!
add a comment |
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!
add a comment |
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!
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!
edited Jan 4 at 4:06
answered Jan 4 at 0:59


HolyMolyHolyMoly
9411427
9411427
add a comment |
add a comment |
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.
add a comment |
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.
add a comment |
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.
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.
answered Jan 4 at 1:10
JohannesJohannes
37.8k103471
37.8k103471
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030449%2fpolly-background-is-foreground-not-background%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
maqMwZE,v,rkuC3c1q0,D,0IK0CmEGCEt6ih1Sy4rTfdXxqCNTYRItOz h20KsiLHmPEV1I421L7t3,8Y LOrsYhQXEtIYdoUn5Sbb
position your content as absolute and give it a z-index larger than the background's z-index. if this fails, then come back with some code to show what you tried.
– HolyMoly
Jan 3 at 22:09
#bg
is on top - you don't need thez-index
but you do need content or at leastheight
andwidth
– ic3b3rg
Jan 3 at 22:13
@HolyMoly I have a z-index for both divs. they both have either content or a height
– Richard Manning
Jan 3 at 22:36