the z-index in "div.dialog" doesnt seem to influ the layer index? the "div.dialog" div has to be on top of everything
EDIT:
div.dialog_bg has to be in the background
#topfix has to be on top of that
div.dialog has to be on top of everything
code...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body style="margin:0px">
<style>
#topfix {
position:fixed;
top:0px;
left:0px;
width:100%;
height:130px;
z-index:1;
background:#ff0000;
}
#div_dialog {
position:relative;
z-index:1;
}
div.dialog {
position:absolute;
background:#ffffff;
border:1px solid #000000;
width:400px;
height:300px;
top:50px;
left:100px;
z-index:99; // doesnt seem to influ the layer index
}
div.dialog_bg {
position:absolute;
background:#ffff00;
width:100%;
height:500px;
opacity:0.3;
}
</style>
<div id="div_dialog">
<div class="dialog_bg"></div>
<div class="dialog">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</div>
</div>
<div id="topfix">
topfix
</div>
</body>
</html>
Then you need to give its parent #div_dialog at least z-index: 2 because the z-index is relative to its parent and dialog is the only child of #div_dialog.
Also z-index: 1 for #div_dialog isn't enough because #topfix comes after it in HTML and will be placed over #div_dialog.
EDIT
So regarding your "new" you have to give
#div_dialog {
position: absolute;
z-index: 9999;
}
.dialog_bg {
z-index: 1;
}
.dialog {
z-index: 2;
}
Related
I have an a-element with z-index -2 and a div-element with z-index -1. I expect the div-element to be on top because it has a higher z-index. In Chrome this is not the case.
Is this a bug in Google Chrome?
Edit: Please don't send suggestions on how to fix it. I want to know why it is looking different.
#bar
{
position:fixed;
top:0;
right:0;
left:0;
height:100px;
z-index:-2;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:-1;
background:black;
margin:200px auto 10000px auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="document.getElementById('bar').click()">
<a id="bar" href="#square">scroll down</a>
<div id="square"></div>
</body>
</html>
Screenshot
To be honest im not sure why this is happening, but if you use positive values everything works as expected.
#bar
{
position:fixed;
top:0;
right:0;
left:0;
height:100px;
z-index:1;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:2;
background:black;
margin:200px auto 10000px auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="document.getElementById('bar').click()">
<a id="bar" href="#square">scroll down</a>
<div id="square"></div>
</body>
</html>
The problem is with the fixed position element which has more priority than other element refer Stacking Contexts for more info
Here is the jsfiddle link with different approach to solve the problem
#bar
{
position:sticky;
top:0;
right:0;
left:0;
display: inline-block;
width: 100vw;
height:100px;
z-index:-2;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:-1;
background:black;
margin: 0px auto;
}
This is our code. css:
.mydiv
{
position: absolute;
background-color: white;
margin-top:40px;
display: block;
left: 50%;
transform: translate(-50%, 0);
max-width:10%;
max-height:30%;
overflow: auto;
}
body
<div class="mydiv">
<img border="0" src="http://atldunia.com/youtube/FixedP7.jpg" />
</div>
This div automatically adjusts to the size of the contents. Both the scroll bars appear on demand. However, we are unable to add a button that is right aligned and appears outside the scroll making it always visible.
http://atldunia.com/youtube/FixedPosPopup7.htm
I assume you wish to add a "close" button. If so, you can wrap your content in another layer and add the button to the first.
.popup-wrapper { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:400px; max-height:400px; overflow:hidden; }
.popup-close { display:block; position:absolute; right:0; top:0; width:32px; height:32px;
background:#404040; line-height:32px; vertical-align:middle; text-align:center; font-size:24px;
color:#909090; cursor:default; }
.popup-close:hover { background:#808080; color:#c0c0c0; }
.popup-content { display:block; position:relative; width:100%; height:100%; overflow:auto; }
.popup-content > img { display:block; position:relative; width:auto; height:auto; }
<div class="popup-wrapper">
<div class="popup-content"><img src="http://atldunia.com/youtube/FixedP7.jpg"/></div>
<span class="popup-close">×</span>
</div>
You will need modify a couple things to your liking, but you get the idea.
2 things (and I'm sure they're related)
I would like my lightbox-style absolute div (.g) to be the height of the page not the window (click on the link in the html to display it)
I would like my img in the absolute div (.g img) to respond to the window height.
Is this possible? I've tried a number of things having searched extensively but my rudimentary knowledge of html and css is failing me. e.g. if I use min-height:100% on html then my div.g is the height of the page but the main content div (#d) doesn't stick to the bottom of the window.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>testing</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="d">
<div id="c">
<p style="margin-bottom:450px">click for images</p>
<p>end text</p>
</div>
<div id="f">footer</div>
</div>
<div class="g" id="a1">
<div>
<img src="http://www.JBM-Computing.net/test/img1.png">
<p>click img, or here to close</p>
</div>
</div>
<div class="g" id="a2">
<div>
<img src="http://www.JBM-Computing.net/test/img2.png">
<p>click here to close, or click img</p>
</div>
</div>
</body>
</html>
CSS
* {margin:0;
padding:0
}
html {height:100%
}
body {height:100%;
font-family:Arial;
background:lightSteelBlue
}
#d {position:relative;
top:2%;
right:0;
bottom:2%;
left:0;
margin:0 auto;
width:80%;
max-width:840px;
min-height:96%;
background:white;
border:solid 1px green
}
#c {position:relative;
margin:4% auto 40px;
max-width:80%;
padding:5px;
border:solid 1px red
}
#f {position:absolute;
right:10%;
bottom:0;
left:10%;
max-width:80%;
padding:5px;
background:lightGrey
}
.g {position:absolute;
top:0;
right:100%;
bottom:100%;
left:0;
z-index:4;
overflow:hidden;
background:RGBA(0,0,0,.7)
}
.g:target {bottom:0;
right:0;
overflow:visible
}
.g a.x {position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:5
}
.g div {position:relative;
z-index:6;
margin:8% 8% 0;
background:powderBlue;
border:10px solid darkKhaki
}
.g img {display:block;
max-width:100%;
margin:auto;
border:solid 1px blue
}
.g p {padding:5px
}
I've also posted it on jsFiddle here. Resize the window and watch the page react.
It behaves acceptably at the moment but it's not perfect.
Any help greatly appreciated.
Edit: why does .g:target {bottom:0} not make the div fill the whole height of the body?? It should shouldn't it?
If I understand your question correctly, the problem is .g div - margin:8% 8% 0; which prevents the pop-up from displaying in full page size.
.g div {position:relative;
z-index:6;
height: 100%; <=== Full page size
box-sizing: border-box; <=== Prevent vertical scroll bar
/* margin:8% 8% 0; */ <=== Problem, so comment out
background:powderBlue;
border:10px solid darkKhaki
}
jsfiddle.net/W8kxm/
I've started with css just day ago so I'm new to this.I'd like to achieve moving blue rectangle when I move mouse on red rectangle.I'm sure hover is able to handle this event, but I don't really know how to work with parent/child relationship.Thank you.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#first
{
width:50px;
height:50px;
position: relative;
top:100px;
left:100px;
background: red;
}
#second
{
width:50px;
height:50px;
position: relative;
top:200px;
left:200px;
background: blue;
transition: left 1s;
}
#first:hover + #second
{
left:250px;
}
</style>
<div id="first">
<div id="second"></div>
</div>
</body>
</html>
Use child > selector as + is for siblings:
#first:hover > #second
{
left:250px;
}
Demo
Use the child selecter (>) not sibling selector (+)
DEMO HERE
#first:hover > #second
{
left:250px;
}
I have two divs one inside another, i would like to overlap one div with other and also use css idnex, but ie doesn't let me do this, is there some kind of workaround?
Please view this code in IE since it works in other browsers.
Here is jsfiddle: http://jsfiddle.net/xkDCX/1/
And the code:
<div class="container">
<div class="button"></div>
<div>
body{
margin:50px;
}
.container{
position:relative;
width:410px;
height: 300px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index:22;
}
.button{
width:20px;
height:20px;
border:2px solid black;
position:absolute;
right:-10px;
top:-10px;
background:black;
z-index:11;
}
The thing here is that the filter you added doesnt work at all only in IE so when you see the style in other browsers they dont recognize it at all.
UPDATE:
Would this worked out for you?
<div class="container">
<div class="button">
<div class="but"></div>
</div>
<div class="background"></div>
<div>
<style>
body{
margin:50px;
}
.container{
position:fixed;
width:410px;
height:300px;
margin:0;
padding:0;
}
.container .background{
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index: 50;
}
.container .button{
position:absolute;
width:410px;
margin-left:auto;
margin-right: auto;
z-index: 100;
}
.container .but{
position:absolute;
width:20px;
height:20px;
background:black;
right:-10px;
top:-10px;
border:2px solid black;
}
</style>