I am trying to over lap a div on another div by using css, while background should become blur, like modal pop up show.
But the background of modal pop is still getting displayed through the modal pop up.
As u can see background is visible through the modal pop up!!
I have setted z-index of pop up more than the background
CSS:
.MoreDetails
{
background-color: #000;
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 2.0;
}
My design:
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
Child element cannot be stacked below parent element, even by using z-index.
Use z-index for maintaining stack level of absolute positioned elements that are siblings.
http://jsfiddle.net/TWLgc/
HTML
<div class="wrapper">
<div id="MoreDetails" class="MoreDetails" >
<div id="tableDetails" class="tblView">
</div>
</div>
<div id="tableDetails2" class="tblView2">
</div>
</div>
CSS
.MoreDetails
{
/*background-color: #000;*/
background-color: rgba(0,0,0,0.8);
z-index: -1;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
/*opacity: 0.7;*/
z-index: 100;
text-align: center;
}
.tblView
{
position: fixed;
top: 10%;
left: 30%;
z-index:1;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
.tblView2
{
position: fixed;
margin:auto;top:0;bottom:0;left:0;right:0;
z-index: 101;
opacity: 1;
background-color: red;
height: 100px;
width: 100px;
}
The biggest issue is that you're nesting the tableDetails inside the MoreDetails div. Any opacity or z-index you apply to tableDetails will affect MoreDetails. Another approach might be to use the ::before pseudo class on tableDetails and position the two with CSS.
Some other tips:
Don't share id and class names. Using MoreDetails as both an id and
a class may end up breaking things as you progress.
opacity can
only have a value from 0 - 1.
Hope this helps! Good luck!
Related
The div tags are nested as
<div class="Site-wrapper" id="Site-wrapper">
<div id="Main-Menu-mobile" class="Main-Menu-mobile">
<div class="Site">
</div>
</div>
</div>
The logic for the menu is just these 4 CSS classes
.Site-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.nav-open .Site {
left: auto;
transform: translate3d(70%, 0, 0);
}
.Site {
position: relative;
left: 0;
min-height: 100%;
background-color: #e4e4e4;
transition: 0.2s ease all;
}
.Main-Menu-mobile {
width: 70%;
position: absolute;
top: 0;
left: 0;
padding: 15px;
}
https://codepen.io/taufeq-orangejulius-razakh/pen/dypgjNO
Your Site-Wrapper div (The parent one) only has a height of 41px. And this stays the same even when the toggler button translates to right. This is where the implementation is a bit off.
Try removing your overflow:hidden from .Site-wrapper
.Site-wrapper {
position: relative;
width: 100%;
/* overflow: hidden; This needs to be implemented well*/
}
What you can do, is once the Hamburger icon is clicked change the overflow property value in Javascript.
I have made a footer in Photoshop looking like this:
As you can see, the footer here is slightly arced all the way across. I have tried doing something with border-radius, but that almost only targets the edge, which makes the arc more curved in the edges, and not even receiving the effect of a subtle arced footer as seen in the image.
Is there an easy CSS way to do this, or do I need some JavaScript or something to achieve this?
Use a pseudo element of the footer with border-radius to make the arch.
I made them different colors here so you can see which element is which.
body {
margin: 0;
max-height: 100vh;
overflow: hidden;
}
footer {
bottom: 0; left: 0; right: 0;
position: absolute;
background: brown;
height: 10vh;
}
footer::before {
content: '';
background: red;
width: 200%;
position: absolute;
left: 50%;
top: -100%;
transform: translateX(-50%);
height: 1000%;
border-radius: 50%;
z-index: -1;
}
<footer></footer>
This solution uses a large width to get a more pleasant curve, but without the pseudo-element:
footer {
background-color: red;
width: 200%;
transform: translateX(-25%);
height: 200px;
border-radius: 50% 50% 0 0;
}
<div>
<footer></footer>
</div>
Its not perfect, but here i've got a really really big circle that's absolutely positioned with the overflow hidden so that you only see the top part of the arc.
#container{
background: grey;
height:300px;
width:500px;
position:relative;
overflow:hidden;
}
#arc{
position: absolute;
top:200px;
left:-800px;
width:2000px;
height:2000px;
border-radius:2000px;
background:brown;
}
<div id="container">
<div id="arc">
</div>
</div>
https://jsfiddle.net/z9pq1026/
You can actually use border-radius to do this without a pseudo element.
.arc {
width: 100%;
height:500px;
background: #000000;
border-radius: 50% / 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<div class="arc"></div>
will work just fine. Make sure that when you use:
border-radius: 50% / 30px;
the first property is always "50%" as this will ensure the arc meets in the middle. The second property (after the "/") is the height of the arc measured from the middle to the edges
The circle solution, but it's responsive!
footer {
background: #ececec;
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
}
.arc {
position: absolute;
top: 0px;
right: calc(-80%);
width: 300%;
padding-top: 100%;
border-radius: 100%;
background: black;
}
<footer>
<div class="arc">
</div>
</footer>
I want to style every element of my page except for a particular div. I believe this is done with :not, but I'm not sure. I'm doing this to make the opacity of all elements 0.7, except for a popup.
Here is my alternative sugestion: a layer with opacity in front of the web, but behind the overlay.
Here is an example: https://jsfiddle.net/j1jodsej/
HTML
<div id="overlaybg"></div>
<div id="overlay">
I'm the overlay
</div>
CSS
#content {
text-align: justify;
}
#overlaybg {
position: fixed;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,0.5);
}
#overlay {
position: fixed;
z-index: 2;
top: 30px;
background: #FFF;
text-align: center;
left: 50%;
width: 200px;
margin-left: -100px;
padding: 30px;
}
You can give it a id/class like no-opacity and then in css opacity: 1 !important;
Here's an example: http://jsfiddle.net/Lez6kkgw/1/
Trying to solve a recent question, I found out what looks like a Chrome and IE bug.
When I set 2 divs, and the containing div has border-radius and overflow: hidden, the inner div is responding to hover on the area that shouldn't be
In this snippet, hover the grey area. The inner div will change color. This happens in IE and Chrome, but not in FF
.innerw, .innerw2 {
width: 240px;
height: 240px;
position: relative;
border-radius: 50%;
}
.innerw {
left: 0px;
top: 0px;
overflow: hidden;
}
.innerw2 {
left: 80px;
top: 0px;
background-color: palegreen;
}
.innerw2:hover {
background-color: green;
}
.inner2 {
left: 168px;
top: 13px;
width: 79px;
height: 229px;
background-color: grey;
z-index: -1;
position: absolute;
}
<div class="innerw">
<div class="innerw2">
</div>
</div>
<div class="inner2"></div>
I would like to know a way to avoid this bug.
I think this has to do with the relative positioning. If you drop the relative positioning on .innerw2, and use margin-left instead, this no longer occurs.
I have this div here...
<div class="gallery"></div>
and here is the CSS:
.gallery {
background-color: #000;
height: 125px;
text-align: center;
position: fixed;
width: 100%;
z-index: 99999999;
top: 10%;
}
Now my site is broken up into <section> and I am trying to have that element at the top of the section at all times, not that top of the page. How would I accomplish this ?
Add css position: relative to your <section>. Then for .gallery, change fixed to position: absolute; top: 0; left; 0;
Remove that top; 10% stuff too...
You would have to modify the position to be absolute and and top: 0;