I want to create a tutorial feature for my user on my website. I'm planning to create a dark overlay layer on the whole screen, and on a specific area, the background is completely transparent, so the user understand the area which the tutorial is talking about.
Here what I have done :
<body>
<div>
<p>THIS IS CONTENT</p>
</div>
<div class="overlay">
<div></div>
</div>
</body>
on CSS :
.overlay {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.overlay > div {
background: rgba(0, 0, 0, 0);
width: 100%;
position: absolute;
height: 30px;
top:0;
left: 0;
}
the div inside .overlay has no effect since the background of the div is ON TOP of the .overlay
What I think prevents your content div from being displayed under the overlay is that you haven't specified a z-index for that. If you specify one for the larger container div like so: <div id="cont"> and give it a z-index smaller than that of the overlay (<9999) perhaps your problem will be solved.
UPDATE: I've read through your question again, and to solve your actual problem, you should make specific content and background div-s inside the master overlay container. It also seems to be important to add position: absolute; to the content div of the overlay.
UPDATE 2: To make the #cont stay visible as the overlay shows up, just add a greater z-index for that div than the one used by the overlay, and add a position: absolute; to it to make it specific.
Below is a working snippet.
#cont {
position: absolute;
z-index: 9999;
color: blue;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9990;
}
#overlay-cont {
color: red;
position: absolute;
top :40px;
left: 50px;
z-index: 9990;
display: block;
}
#overlay-bg {
background: rgba(0, 0, 0, 0.5);
height: 100%;
Width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 9980;
}
<body>
<div id="cont">
<p>THIS IS CONTENT</p>
</div>
<div class="overlay">
<div id="overlay-cont">The overlay content goes here.</div>
<div id="overlay-bg"></div>
</div>
</body>
Related
I have an HTML/CSS pure layout and I'm using flexbox. I am developing a simple hamburger overlay menu sort of thing, but the overlay isn't fully covering the entire site -- there is no higher z-index present.
If I change the opacity to 0, the entire page goes white.
Desired Output:
Div that covers the entire page
Current Output (See Below):
HTML
<body data-theme="light" class="overlay">
...
</body>
CSS
.overlay {
opacity: 1;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
Output
You can't make the HTML body an overlay because it is the main container for the whole page, so it contains the elements you are trying to overlay.
Instead you can create a separate div for the overlay. This shouldn't have any content (unless you want content in your overlay of course). Then you can add your existing overlay class to it:
.overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
h1, p { color: red;}
<body data-theme="light">
<div class="overlay"></div>
<h1>Hello</h1>
</body>
First you may add
.FlexContainer{position: relative;}
Next a few changes for the Overlay:
.FlexContainer .Overlay {
position: absolute;
top: 0;
left: 0;
margin: 0;
border: none;
width: 100%;
height: 100%;
background-color: rgba(013, 130, 230, 0.5);
cursor: not-allowed;
}
One DOM element with position: fixed, another one inside with css-transforms, another one inside that one with position: fixed
All fixed position elements is supposed to be positioned based on the viewport as container, but when the middle element has css-transforms, the inner fixed element is positioned based on the middle element instead of the viewport.
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
}
.contents {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
border: 1px solid red;
transform: translateX(-50%) translateY(-50%);
}
.inner-fixed {
position: fixed;
top: 20px;
left: 20px;
background: rgba(0, 0, 255, 0.1);
width: 100px;
height: 50px;
}
<div class="backdrop">
<div class="contents">
Contents in centered box
<div class="inner-fixed">
Inner-fixed contents
</div>
</div>
</div>
If I remove the transform on the .contents, the inner element is fixed based on viewport.
Happens in Chrome 62 and Firefox 57 (Mac)
Any way around this with the same DOM, so the inner element is fixed based on the viewport without having to skip the use of css-transforms?
With the css-transform:
Without the css-transform:
I have a big image with a dark overlay covering the front of my webpage. I want to add a div filled with bright text on top of the overlay.
Is there a way to position the div so as to exclude it from the overlay?
HTML:
.overlay {
position: absolute;
background-color: rgba(0, 0, 0, 0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
z-index: 1;
}
.about-us {
background-image: url("img.jpg");
width: 1100px;
height: 731px;
display: block;
position: relative;
}
<div class="about-us">
<div class="overlay">
<div class="intro">
<h2>Catchy title</h2>
<p>Small Para</p>
<h1>More txt</h1>
</div>
</div>
</div>
Something like this:
h2 {
background-color: white;
z-index: 2;
}
Assuming that was what you wanted on top.
Use a pseudo element instead of an overlay element.
.about-us:before {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
}
Also you need to explicitly specify position property for intro element in able to interact with the content:
.intro {
position: relative;
}
See example here
I have this simple paper shadow effect for a div, but it's getting ruined whenever I set the parent's background-color property. Here's what it looks like: http://jsfiddle.net/9qahjjwx/
Below is the code. How do I get around this provided that I'll be using a background-color on the parent?
HTML
<section class="block1">
<div class="onpaper effect2">
<h2>Has Background Color on the parent</h2>
<p>This block has background color in its parent that's ruining the shadow effect (due to z-index?)</p>
</div>
</section>
<section class="block2">
<div class="onpaper effect2">
<h2>No Background Color</h2>
<p>This block has <b>no</b> background color in its parent by changing the class..</p>
</div>
</section>
CSS
.block1 {
background-color: #f7f4e8;
height: 200%;
}
.block2 {
height: 200%;
}
.onpaper {
margin:40px auto;
width:75%;
background-color: #d9d8c5;
padding: 3% 6%;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
You'd need to add a z-index to the container and set it lower than the shadows: http://codepen.io/pageaffairs/pen/AgFJe
.block {
position: relative;
z-index: -2;
}
You can add another wrapper element in between, like so:
<section class="block">
<div class="in-between">
<div class="onpaper effect2">
<h2>Has Background Color on the parent</h2>
<p>This block has background color in its parent that's not ruining the shadow effect</p>
</div>
</div>
</section>
CSS:
.in-between {
position: relative;
z-index: 1;
}
That is ugly, but it works without setting a negative z-index on the parent (which might get you into trouble with the parent's parent).
You need to set a negative z-index and set the position to relative on .block2
.block2 {
height: 200%;
background-color: #f7f4e8;
position: relative;
z-index: -2;
}
DEMO
I have a button that is in a div, that is behind another div. The second div overlaps the first by using the css: position: absolute;
Therefore the button is not clickable. Is there any way I can make it clickable like a normal button?
Example: jsfiddle
body {
background-color: blue;
}
.stack {
width: 320px;
height: 240px;
position: absolute;
top: 50%;
left: 50%;
background-color: white;
margin-top: -120px;
margin-left: -160px;
}
.background {
width: 320px;
height: 240px;
background-image: url('http://www.userlogos.org/files/logos/ps1d3r/apple-black-i.png');
top: 0px;
left: 0px;
position: absolute;
}
.card {
pointer-events: none;
width: 320px;
height: 240px;
background-image: url('http://2.bp.blogspot.com/-OIHQM4x8l0U/UEiDLQyiTRI/AAAAAAAAHFs/i1a6rkqQ8tQ/s320/floral+swirl.png');
top: 0px;
left: 0px;
position: absolute;
}
<div class="stack">
<div class="background" onclick="alert('background clicked');">
<button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button>
<div class="card">
<button onclick="alert('card-button clicked');">This is a card button</button>
<textarea style="left:100px; top:100px; position: absolute;">This is a card textarea</textarea>
</div>
</div>
</div>
You can use pointer-events:none; on .card. This will disable the click event on the .card div and user can click on the button behind it. More info here (MDN).
Here is an example showing how you can enable the click envent on an element hidden behind another one :
button {
margin: 50px;
}
button:focus {
background: red;
}
button:hover {
background: teal;
}
.inFront {
pointer-events: none;
position: absolute;
top: 25px; left: 25px;
right: 25px; height: 150px;
border: 3px solid red;
background: rgba(0, 0, 0, .5);
}
<button onclick="alert('button clicked');">I am a button behind the .inFront div</button>
<div class="inFront"></div>
In this example, the .inFront div is over the button but the pointer-events: none; property on the div allows the button to be clicked, focused and hovered.
Regarding your example, the drawback is that it will also disable the textarea and the "card button" so you will have to change your HTML and move both textarea and card button out of the .card div so they are still clickable. Here is a demo :
DEMO
Use z-index in this case.
<button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute; z-index:1;">This is a background button</button>
DEMO
This positions the element in the depth field higher than everything else. The higher the number, the higher the stack order.
z-index: 1;
Though, z-index requires positioning such as position: absolute; or position: relative;.
Read a great article about Z-Index here.
Give the button a positive z-index
button {
position: absolute;
z-index: 1;
}
For those who have the same issue as I do where(not restructuring your HTML):
div 1 is on top of div 2
Both div 1 and 2 needs to be clickable/interactive
However div 2 should be infront of div 1
Apply the following codes to div 2:
div2 {
position: absolute; // to manipulate position
z-index: 999; // manipulating the position, putting it in front of div1
pointer-events: visible; // making it interactive, clickable
}