I convert any div on my webpages to pop-up box by adding a class, turnIntoOverlay , to the div. (See JSFiddle)
.turnIntoOverlay {
position: fixed;
background-color: white;
top: 60px;
max-width: 680px;
z-index: 80;
border: 6px solid #BBB;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
max-height: 800px;
overflow: auto;
padding:10px;
}
Now when the pop up is displayed I also want to create a mask that puts up a faded layer(or mask) to the rest other page elements that appear below popup box. To create this mask, I resorted to pure css approach using psuedo selectors, so that the mask is shown/hidden simply when a popup box( a turnIntoOverlay element) is visible. I added the following css:
.turnIntoOverlay:after {
content: "";
background-color: whitesmoke;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.5;
top: 0;
left: 0;
}
Everything works fine except that the mask appears on the pop up as well even when I keep the z-index lower than of popup. Also to my surprise, it works only when z-index=-1.
Can you please suggest how to rectify this ?
See JSFiddle here
The problem is the stacking context. The :after content can not be below it's parent, except if the parent would be out of the stacking context which in your case is no option. z-index: -1 works because it's a special case and has priority over the parents content. That's why it does not effect the text, but effects background and border. See the list on Stacking Contexts. Your :after { z-index: -1 } is nr. 2 in the list.
Your only option would be using an additional wrapper:
<div class="turnIntoOverlay"><div>this div is convertible to pop up!<input/></div></div>
moving your current styles for .turnIntoOverlay to .turnIntoOverlay > div and applying the overlay to the outer div with a positive z-index:
.turnIntoOverlay:after {
z-index: 1;
}
Here is a demo.
Unfortunately IE8 and below are buggy on that. Also they do not know opacity and using -ms-filter does not work on elements without layout like pseudo classes :before and :after are.
Of course, if you'd use an additional wrapper anyway, you could just give the other wrapper the background-color. No need for :after then:
.turnIntoOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: skyblue; /* for old browsers */
background-color: rgba(135, 206, 235, 0.4);
}
Compared to the pseudo class approach, this includes a little fix for IE8 and below. Can be made even better by using a transparent png which is applied to IE. With that, it looks quite the same in every browser (after IE6 I would say).
Here is a demo.
My solution is to use both :before and :after to solve your problem:
.turnIntoOverlay {
position: fixed;
background-color: white;
top: 60px;
max-width: 680px;
border: 6px solid #BBB;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
max-height: 800px;
overflow: auto;
padding:10px;
z-index: 80;
}
.turnIntoOverlay:before {
content: "";
background-color: skyblue;
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.4;
top: 0;
left: 0;
}
.turnIntoOverlay:after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
z-index: -1;
content: "";
}
JSFiddle
I took out the position: fixed from .turnIntoOverlay and now it works.
Related
I have a DOM that looks like this:
<body>
<div id="main">
<iframe id="content"></iframe>
</div>
<div id="overlayWrapper">
<div id="overlay"><--THIS IS EMPTY DIV--></div>
</div>
</body>
Where inside the main div I have some other stuff too, which are not very relevant here. Now, these divs have the following CSS classes.
#main {
width: 100%;
position: static;
z-index: 2;
overflow: hidden;
}
#content {
width: 100%;
height: 500px;
z-index: 3000; // This doesn't seem to help.
}
#overlayWrapper {
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000; // This needs to be at least 1000 for overlay to cover all elements in the page
position: fixed; // This seems to cause the problem?!
}
#overlay {
opacity: 1;
will-change: opacity;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
}
Now, this seems to work to some extend, as I see my overlay with the background-color value of rgba(0, 0, 0, 0.5) appearing on the screen.
The problematic part is that I cannot click on the stuff that are inside the iframe.
What I noticed is that this happens because of position: fixed style in the #overlayWrapper.
If I remove it, then I can click on the stuff from iframe but now the overlay is not visible any more.
Is it even possible to somehow keep the overlay but make the stuff on iframe clickable again?
I tried to add z-index: 3000; to iframe (i.e., to #content), but that doesn't seem to work.
Any ideas?
z-index only works on positioned elements. Which means the z-index that you applied to #content, which is the iframe, is not in effect.
#content {
position: relative;
z-index: 3000;
}
Here is the working jsfiddle.
PS: I added some links in #main to simulate the content you might have on your page.
It's because the z-index property of the div#main element should be placed before the the z-index of the div#overlayWrapper element.
Use position: relative on the <iframe> element because the z-index property gets in action with its relative.
#content {
width: 100%;
height: 500px;
/* This doesn't seem to help */
z-index: 3000;
position: relative;
}
How can I extend background color outside div?
My code:
.content-right{
background-color: blue;
padding: 40px;
position: relative;
}
.content-right:after{
position: absolute;
top: 0;
right: calc(1px - 100%);
width: 100%;
height: 100%;
background-color: red;
content: "";
}
jsfiddle
The problem is that I'm getting scroll (horizontal) and I don't want that... What I want is that red part to be extended after that black so it reaches the edge of the screen on any resolution but without scrolling... If I add overflow: hidden, it doesn't solve the problem.
Any ideas?
Thanks.
Move the pseudo to the left, and make the width of this 1000px.
Set a shadow on it to the right, with 1000px offset, and color red
.main{
background-color: #000;
height: 500px;
}
.content-right{
background-color: blue;
padding: 10px;
position: relative;
height: 100px;
}
.content-right:after{
position: absolute;
top: 0;
right: 0px;
width: 1000px;
height: 100%;
background-color: transparent;
box-shadow: 1000px 0px red;
content: "";
z-index: -1;
}
fiddle
Note: now the pseudo element will be probably outside of bounds, but to the left. Elements going outside of bounds to the left or upper side do not generate scrollbars.
On the other side, the shadow extends to the right. But the shadow is not taking into account when computing the layout, so this won't generate scrollbars either.
Quick Fix, but essentially I made the document have a overflow-x value of hidden so it will NEVER produce a horizontal scroll bar. If this is a problem, I can try to think of a better solution, but this is what I have so far.
JSFiddle: https://jsfiddle.net/m4f4x3bt/3/
html, body{
overflow-x: hidden;
}
I'm having a hard time getting right stacking order. Is there a physical way to render this right (.above-mask being, well, above mask, while .below-mask stays below) without changing html?
EDIT: Removing z-index on .below-mask is, unfortunately, also impossible.
HTML:
<div class="mask"></div>
<div class="below-mask">
<div class="above-mask"></div>
</div>
CSS:
.mask{
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: rgba(0,0,0,0.3);
z-index: 10;
}
.below-mask{
position: absolute;
width: 15em;
height: 15em;
background: blue;
z-index: 1;
}
.above-mask{
position: absolute;
width: 10em; height: 10em;
top: 2.5em; left: 2.5em;
background: yellow;
z-index: 100;
}
codepen: http://codepen.io/anon/pen/WrXbaL
EDIT: How it looks now - I'm making a first-steps view. I wanted elements that need to be explained to be above the mask (here it would be the search panel), while everything else stays neatly hidden below.
Okay, I'm stupid. I don't need a mask, I can just use eiter a huge box shadow or an outline:
outline: 1000em solid rgba(0,0,0,0.3);
It does the trick.
http://codepen.io/anon/pen/eJeNVg
My Fiddle
http://jsfiddle.net/yjw46/2/
My Goal
I have this beautiful wheel of colors as a PNG. (I also have it as an SVG). When one of the colors is clicked, I want the WHOLE circle to change to that color. For example, if red is clicked, I want the whole wheel to turn red instead of colorful.
How I Intended to do it
I wanted to have a transparent (in the Fiddle it's semi-transparent, for debugging purposes) div in the shape of a circle (using border-radius) that will be DIRECTLY ON my color-wheel-image. When a color is pressed, I planned for the div to stop being tranparent, and (in a beautiful transition) turn to that color, making it look like the whole wheel has changed color.
Problem
I cannot get the div to cover the image.
So
I'd be glad to hear either why my technique didn't work, or a better technique, if you have one.
You was very close, simply chanage position: relative; to position: absolute; (on the div you want to have over the image) to fix the problem.
Now remember we need to have the parent as position: relative; or the absolute positioned div will not sit in the parent. You have already set this so its good to go.
Find more on position: absolute; here.
Demo here
#circleCover {
width: 300px;
height: 300px;
position: absolute;
top: 0px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here is a little demo to show what will happen without the relative position being set on the parent with the child having absolute.
Demo Without Relative
So you can see that the child is not staying within the parent.
And here is the parent with relative position.
Demo With Relative
As here the child does stay within the parent. This should help you understand why that is needed for the task you are trying to accomplish. Any questions please do just leave a comment and I will get back to you.
<div id="circleWrap">
<img src="http://y.emuze.co/circle.png" id="colorCircle"/>
<div id="circleCover" >
</div>
</div>
I have kept Your div one above the other
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
top:0px;
}
#circleWrap {
position: relative;
top: 0px;
width: 300px;
height: 300px;
margin: 0 auto;
}
#circleCover {
width: 300px;
height: 300px;
position: relative;
top: -302px; left: 0px;
z-index: 2;
border-radius: 150px;
background-color: rgba(0, 0, 0, 0.2);
}
Here it is in action: http://jsfiddle.net/yjw46/7/
Change your CSS slightly.
#circleCover {
top:-304px;
}
Fiddle
Just add position:absolute in #colorCircle
#colorCircle {
position: relative;
top: 0px; left: 0px;
z-index: 1;
width: 300px;
height: 300px;
position:absolute;
}
I'm trying to make a background image be outside a div and can't figure out how to do this (if even it's possible). My HTML:
<div id="test"></div>
My CSS:
#test {
width: 50px;
height:50px;
background: 0 50px url('https://developers.google.com/_static/images/developers-logo.svg') blue;
}
A stand-alone demo:
http://jsfiddle.net/568Zy/
The demo shows the image within the 50x50 div. What I was hoping for was to have the background image start at 0px from the top and 50px from the left.
Any ideas?
Your question does not make it clear exactly what you want the end result to look like.
It is not possible to make a background image 'overflow' it's element, however you can apply the background image to a pseudo element and make that whatever size you want and position it wherever you want.
I have used this technique on your example: http://jsfiddle.net/ybw750jd/
#test {
background: blue;
height:50px;
position: relative;
width: 50px;
}
#test:before {
background: url("https://picsum.photos/450/100") repeat scroll 0 0 transparent;
content: " ";
display: block;
height: 100px;
position: absolute;
width: 450px;
z-index: -1;
}
If this is not the effect you want, please rephrase your question and consider making a mock up image showing what you want it to look like.
Try this: http://jsfiddle.net/568Zy/16/. Essentially, you're creating two <div> elements, and set one to be absolute with a z-index: 0; on one and z-index: 1; on the other.
<div id="test">zzz</div>
<div class="z-index"></div>
#test {
background: blue;
width: 50px;
height:50px;
position: relative;
z-index: 1;
}
.z-index {
position: absolute;
background: url('https://developers.google.com/_static/images/developers-logo.svg');
z-index: 0;
width: 300px;
height: 100px;
top: 0px;
left: 50px;
}