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)
Related
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;
}
There's a way to auto fit my div inside my image without use of % in my css? I can fit it using % , but I can't get responsive . PS : I want to add an scroll inside my div, that my text fit inside my screen and I can scroll it inside
where my screen is an IMG and my text inside my div
.Screen{
position: absolute;
top: 20%;
right: 10%;
width: 80%;
z-index: 1;
}
.text{
position: absolute;
top: 23%;
right: 14%;
overflow: auto;
width: 73%;
height: 35%;
}
.Screen{
position: relative;
top: 20%;
right: 10%;
}
.text{
position: absolute;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
overflow-y: scroll;
}
You can use this. As there were no image in the post you have to adjust the values accordingly. Let me know if you stuck anywhere! Happy coding!
I want to make responsive image once the size becomes smaller it moves to bottom from the top right position. also I'm using material ui but can't find any help of it in this
.my-photo{
height: 300px;
position: absolute;
right: 50px;
top: 150px;
border-radius: 50%;
}
#media(max-width:800px){
.my-photo{
height: 250px;
position: absolute;
right:auto ;
top: 500px;
border-radius: 50%;
}
}
try using the bottom style:
.my-photo{
height: 300px;
position: absolute;
right: 50px;
top: 150px;
border-radius: 50%;
}
#media(max-width:800px){
.my-photo{
height: 250px;
right: auto;
bottom: 0;
}
}
plus try not to copy unnecessary styles in #media
I want to center absolute position div that has max-width.
#confirmation-popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
This does not work in IE.
max-width doesn't work in IE. better use width or you can use translate technique.
here is the snippet:
#confirmation-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
<div id="confirmation-popup">this is demo</div>
I would like to have the Wrapper-Top layer on top of the other one. I set z-index and position, which should be sufficient. Am I missing something? Here is the website: Thank you in advance.
EDIT: here is the code I used:
<body>
<div class="Wrapper-Top">
</div>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
</body>
.Wrapper-Top {
min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background:url(img/header-bg.png)
repeat-x 50% 0%;
z-index: 20;
}
.Wrapper-Middle {
min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 160px;
left: 0px;
position: absolute;
z-index: 10;
text-align: center;
}
You are missing a position attribute on .Wrapper-Top.
z-index on MDN
Initial value: auto
Applies to: positioned elements
Inherited: no
When it isn't present, your z-index:20 in .Wrapper-Top is doing nothing.
i think this is what you want..
<body>
<div class="Wrapper-Middle">
hjklhjkhkjlhjkl
</div>
<div class="Wrapper-Top">
</div>
.Wrapper-Top{ min-width: 980px;
width: 100%;
height: 179px;
top: 0px;
left: 0px;
background: url(img/header-bg.png) repeat-x 50% 0%;
z-index: 20;
position: absolute;
}
.Wrapper-Middle{min-width: 980px;
width: 100%;
height: 300px;
margin: 0 auto;
background: #eee;
top: 0px;
left: 0px;
z-index: 10;
text-align: center;
}
use position absolute both of this and give highest z-index value what you want to top of anothe one. like this
.Wrapper-Top{top: 0px; left: 0px; position:absolute; z-index: 2; }
.Wrapper-Middle{top: 160px; left: 0px; position: absolute; z-index: 1;}