I encountered this problem when I was fixing my footer. Before it worked perfectly fine.
This is the code:
.light {
position: absolute;
top: 97.5%;
left: 50%;
transform: translateX(-50%);
width: 700px;
margin-left: -10px;
opacity: 0;
}
FOOTER:
.contacts {
display: grid;
place-items: center;
background-color: rgb(14, 14, 14);
margin-top: 10rem;
bottom: 0;
width: 100%;
position: fixed;
}
I didn't try anything else, because I just couldn't understand how to get out of this problem
Before I did anything to the footer it worked perfectly fine, but after I fixed the footer, the light wasn't going over the footer. The code I'm using now for the footer(doesn't work)
width: 100%;
position: fixed;
The code I used before, when it worked: position: absolute;`
For the element you want above your footer, you want to give it a z-index tag, and for the element you want layered behind you, you want to give it a lower z-index number,
for example:
.light {
position: absolute;
top: 97.5%;
left: 50%;
transform: translateX(-50%);
width: 700px;
margin-left: -10px;
opacity: 0;
z-index: 1;
}
.contacts {
display: grid;
place-items: center;
background-color: rgb(14, 14, 14);
margin-top: 10rem;
bottom: 0;
width: 100%;
position: fixed;
z-index: 0;
}
Related
I have a button which creates a popup and makes the background of my page black. This works however it doesn't affect any bootstrap containers. I am currently using bootstrap 4 and react.
My css for this pop is below
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: rgba(0,0,0, 0.5) !important;
}
.popupInner {
position: absolute;
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
margin: auto;
border-radius: 20px;
position: absolute;
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
margin: auto;
background: white;
}
Anyone have any insight on how to target these containers.
Setting a z-index on popup will probably fix it (e.g. z-index: 1).
If that doesn't fix it, you may need to set a lower z-index on those bootstrap elements (e.g. z-index: 0)
Here i uses bootstrap for responsive. But i need to fix overflow.
Css code is:
.border-wrapper {
position: absolute;
height: 4px;
background: #333;
top: 64%;
left: 50%;
width: 51%;
z-index: 0;
transform: translate(-50%,0%);
overflow: hidden;
}
In order to translate an element completely out of view, I used transform: translate(0, -100%);. Its children however, if you resize the window compressing its height far enough, will gradually reappear. I have no clue why they do this, and I'd like someone to shed light on the reason why this happens. Here's the fiddle.
HTML
<body>
<div id="background">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#background {
background-color: red;
height: 100%;
width: 100%;
position: fixed;
transform: translate(0, -100%);
}
#circle1 {
background-color: yellow;
height: 500px;
width: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 0;
}
#circle2 {
background-color: aqua;
height: 400px;
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 1;
}
you have fixed heights for your cirecles (500px / 400px). When #background's height becomes less than that by resizing the window, the circles would overflow #background vertically.
The translatemovement by 100% refers to #background, so you still see the part of the circles that would overflow #background without the translate setting.
I'm trying to z index an element behind it's parent but it isn't working.
Here's my pen:
http://codepen.io/Tiger0915/pen/OPXway
and my SCSS:
div {
width: 400px;
height: 250px;
position: relative;
background: grey;
margin: 100px auto;
z-index: 5;
&:after {
content: ":after";
position: absolute;
width: 100%;
height: 100%;
top: -20px;
right: -70px;
background: lightgrey;
z-index: 4;
}
}
how do I get my :after to appear behind my parent div?
I think I figured it out. Like ajp15243 said, I can't position a child element behind a parent element.
So I ended up creating 2 different pseudoelements, a :before and an :after, both of which appear behind the other children of my div (using negative z indexes), and I can put the after at a lower z index than the before to get the effect I wanted.
div {
width: 400px;
height: 250px;
position: relative;
margin: 100px auto;
z-index: 5;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: grey;
z-index: -1;
}
&:after {
content: ":after";
position: absolute;
width: 100%;
height: 100%;
top: -20px;
right: -70px;
background: lightgrey;
z-index: -2;
}
}
Here's the pen:
http://codepen.io/Tiger0915/pen/XJKBoq
do not know what I might be doing wrong, I tried to put it this way:
.container-image{
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
display: inline-block;
position: relative;
z-index: 20; // dont work
}
.container-image img{
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10; // dont work
}
jsfiddle
I need the image is behind the edge (.container-image)
Put a container around the border div and the image. http://jsfiddle.net/7fqAu/2/
<div class='example'>
<div class="container-image"></div>
<img src="http://i.imgur.com/T0KMwIs.jpg">
</div>
body {
background: red;
}
.container-image {
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
position: relative;
z-index: 20;
}
.example {
width: 226px;
height: 169px;
position: relative;
}
.example img {
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10;
}
You could add the border image to .container-image:after instead of as a background to .container-image - no need for z-index at all then.
jsfiddle here