I have two divs.
The first one covers the whole screen and with a transparent background
the other div has a white background and a higher z-index then the first div. But the transparent background covers the second div with the white backgorund...what can I do to fix this?
.lightbox{
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: 1000;
filter:alpha(opacity=50);
opacity:0.5;
}
#lightboxContent{
display: none;
width: 325px;
height: 260px;
background: #FFF;
position: absolute;
z-index: 2000;
top:0;
border:3px solid #CCC;
text-align:center;
}
http://jsfiddle.net/DHYFz/
This works perfectly fine for me using IE7+ with your setup. Possible overlapping elements in some other portion of your code?
Possible problem: if you were to, let's say, nest the lightboxContent element, keep in mind that the parent z-index will trump the child.
Easy fix is, not to nest lightbox > lightboxContent. Takes full width and height of container regardless.
An easy way to do it is stop IE7 by putting at the top of your html.
Related
I've been trying to use the mix-blend-mode on a page that has contains instances of css opacity transitions. What appears to be happening is that the div containing the mix-blend-mode displays as it would without the blend mode during the transition, or rather, while the animation is in progress. I've only found it to be an issue in Chrome.
In my example, while the div is transforming the blend-mode displays correctly over the image but not over the page background. Once the transition is complete it goes back to display as it should. In other words the blended div appears as solid yellow on the black background while the animation is ongoing but since it is set to darken it should be invisible over the black background. Once the animation is finished it appears as it should. It appears normal over the image.
I've tried this is Firefox and Safari and there seems to be no issue.
Pen: http://codepen.io/anon/pen/QGGVOX
Edit - I've found another instance where this occurring that doesn't involve any animation. Weirdly it happens when the position of one div is set to fixed while the other is absolute, see here: http://codepen.io/anon/pen/wooRME If the position of the div .image is changed to absolute then the blend-mode appears normal.
body {
background: #000;
}
.blend {
height: 650px;
width: 50%;
background-color: yellow;
mix-blend-mode: darken;
position: absolute;
opacity: 1;
left: 0;
top: 0px;
z-index: 100;
}
img {
position: relative;
z-index: 0;
}
So, I think I figured the problem. During the animation, it seems like the body doesn't count as an element, thus making the yellow appear at 1 opacity. I tested with other blend mode and it always appears yellow. (when set to 'difference the expected result would be white instead of yellow)
So the fix? just add a div with 100% sizes and a black background! Then, the yellow has something to blend in and doesn't show up.
Here's the code that worked in your pen:
html - added the bg div:
<div class="bg"></div>
<div class="blend"></div>
<img src="http://lorempixel.com/500/500/">
it's css:
.bg{
background: #000;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
body {
background: #000;
width: 100%;
height: 100%;
margin: 0;
}
I also changed the body to fill the window so the margin weren't yellow too. Alternatively, the blend div could be sized in function of the body.
tagging #chrscblls since they wanted to know if you found anything.
EDIT :
For the other codepen the problem wasn't the same tho. They were trying to darken an image and a yellow rectangle onto a gray background.
If they didn't want the yellow to show on their gray background, the solution was simply to put the image inside a div and use ::after to blend in a color. Or even just make an empty div, give it the image as background and use the ::after.
this:
<div/>
with:
body {
background: #333;
}
div{
position:fixed;
width: 500px;
height: 500px;
top:50px;
left: 50px;
mix-blend-mode: darken;
background-image: url("http://lorempixel.com/500/500/");
}
div::after {
content: "";
height: 100%;
width: 100%;
background-color: yellow;
mix-blend-mode: darken;
position:absolute;
opacity: 1;
left: 0;
top: 0;
}
or this:
<div><img src="http://lorempixel.com/500/500/"></div>
without the 'background-image' in the div css.
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
Take a look at this screenshoot first:
That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.
Here is the orange background style and the white box itself:
Orange background:
body {
margin: 0;
padding: 0;
background: url("../img/back.png") repeat-x top #fff;
text-align: left;
color: #8a5225;
}
White box:
#box {
background: url("../img/box.png") no-repeat;
width: 163px;
height: 41px;
float: right;
position: relative;
}
Hope you give me some solutions for that. I've been trying using the z-index but it doesn't bring any results...
You won't be able to do this based on your current html structure. Z-index only works for positioned elements. ie relative, absolute or fixed. You won't be able to apply these to the body element. You can try, but I tried and it didn't work. Instead put the orange background into another div and draw the lower one up under it.
http://jsfiddle.net/5bsty/
<div class="one">First div</div>
<div class="two">Second div</div>
div.one {
background: #c74d12;
z-index: 3;
position: relative;
}
div.two {
position: relative;
top: -10px;
z-index: 1;
background: white;
}
use a z-index and you should be done.. give the orange background a higher z-index
I think you look like this
You take two div and parent div define position relative and child div define absolute properties and z-index is compulsory .
css
div.one {
background: #c74d12;
position: relative;
z-index:2;
}
div.two {
position: absolute;
top:11px;
background: green;
left:0;
right:0;
z-index:1;
}
Html
<div class="one">First div</div>
<div class="two">Second div</div>
Check to live demo http://jsfiddle.net/rohitazad/5bsty/3/
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex
Reffer this..:( ?
i have a div with overflow-y: hidden; and a have a pseudo element to the right of the buttons that i want to position outside the div but it will not work. here is the fiddle - http://jsfiddle.net/PAdSd/1/.
But if i give the div no overflow it will sit out of the div fine. Here is that fiddle - http://jsfiddle.net/PAdSd/2/.
Any help would be wonderful
Remove position: relative from .nav. You can see the results in this jsfiddle.
A similar problem had me banging my head against the wall for days. Trial and error and pure chance produced the solution. Not sure about cross browser compatibility, but it works in chrome and firefox (as long as you prefix your css3 properties with -moz).
Here's another way of solving this problem (especially useful when you can't just remove position:relative because of say, using height:100%; on the pseudo element):
To make the content visible, add padding to the bottom, say 10px;
Then to remove the paddings effect for other elements use margin-bottom:-10px;
So:
.nav{
background: transparent;
height: auto;
overflow-y: hidden;
position: relative;
/*new stuff*/
padding-bottom:10px;
margin-bottom:-10px;
}
It's hidden because that is what you have told it to do.
http://jsfiddle.net/PAdSd/3/
If you don't want it hidden, but still want overflow hidden then you will need to reposition it higher. .nav:after will put content at the end, but inside of the nav tag.
You can position it higher by adjusting the top css value.
.nav:after{
content: "";
border-radius: 5px;
background: #000;
width: 10px;
height: 10px;
position: absolute;
left: 500px;
margin-left: 1px;
top: 10px;
box-shadow: -5px 5px 0px #8f0222;
z-index: 20;
}
Or you might want to use body:after instead, because it doesn't sound like you actually want it inside the nav bar.
I have a difficult layout in my website and I have a problem now with IE7. How can I in this example set the inner wrapper to fill the height of the outer wrapper?
http://jsfiddle.net/fMPNw/2/
You have to explicitly define the height of .wrapper, in that situation. That being said, if your top: and bottom: attributes are going to make the height dynamic, your only solution is resetting the height with JavaScript, binding the height to update on window resize, etc.
I was able to get .wrapper2 to layout correctly by making it absolutely positioned. Using the following 2 lines of CSS, width to correct the width issue caused by absolute positioning.
position:absolute;
width:100%;
End result being:
.wrapper{
position: absolute;
top: 310px;
bottom: 130px;
border: 1px solid red;
width: 100px;
}
.wrapper2{
border: 1px solid blue;
height: 100%;
width:100%;
position:absolute;
}