Here is my issue--I need to somehow access the onclick of an item that is covered by another element of higher z-index. I know this is going against the point of z-index, but any ideas?
In the below example, only the small top-sliver of the red box is clickable. I have a webpage design where tabs that need to be clickable are overlaid by an artsy bar... I'd love if there were a way (maybe some javascript trick?) to use onclick for these obscured, lower z-index elements without changing any positioning, though my gut feeling isn't good.
<html>
<head>
<style type="text/css">
#bg {
position:absolute;
width:500px;
height:500px;
background:pink;
}
#under {
cursor:pointer;
margin-top:-10px;
background:red;
width:50px;
height:50px;
z-index:0;
}
#over {
position:absolute;
width:900px;
height:50px;
margin-top:10px;
z-index:100;
}
</style>
</head>
<body>
<div id="bg">
<div id="under" onclick="alert('hi');">aaa</div>
</div>
<div id="over"></div>
</body>
I would do it with a transparent PNG inside a DIV above the artsy bar with the same dimensions as your clickable lowest z-index DIV.
Be aware of Internet Explorer Issues.
I used the technique many times.
The usual replacement method is to place the "over" elements (positioned absolutely) inside the "under" elements (positioned either relatively or absolutely) and make the content the same size (Gilder/Levin Image Replacement).
Related
Can anyone give me a hint why the link in the gray box is not clickable in Internet Explorer (I'm using version 11).
http://jsfiddle.net/rk7n7xjj/1/
I tested it in any other browsers and it works fine.
HTML
<div class="gray">This link is not clickable in IE</div>
<div class="yellow">Some placeholder text</div>
CSS
.gray {
position:fixed;
z-index:-1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
The link is not clickable becaue of the z-index.
Actually you setting the div behind the body. You must specify the z-index of the body too. Or at least set it positiv so it's in front of the body and set other elemnts higher if you expact to display them in front of the gray div. Thats why you cant click it.
Obviously Firefox and co has no problems to identify the link when you set z-index like this.
This may helps you to understand how you can use z-index also in IE.
In your case, to get what you want, your CSS should look like:
.gray {
position:fixed;
z-index: 1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
position:relative;
z-index: 2;
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
Actually you dont need the z-index on the gray in your case but if you plan to may display something behind the gray div than you may need it.
The link is not clickable because IE is taking it behind the body. If you notice, even the text of the link is not selectable. Try setting a z-index: 1 to the body or any parent container. That ways you are first telling the browser to take all the elements inside the container to a higher z-index and then move the link behind that raised set of elements (But the movement of the link is done only within the parent's context i.e. the raised level. Read about stacking context). Thus the link now becomes clickable.
Alternate Solution
If you just want the yellow div over the gray div, then give a positive z-index to the yellow div only. Remove the z-index property from the gray div. If no z-index value is present, 0 is taken as the default. It will always stay behind the yellow div.
.yellow {
position: relative;
z-index: 1;
/* other styles */
}
I have the following DOM structure:
<li>
<div id="some_id_1">-some html-</div>
</li>
The <li> has an image as a background, and the <div> appears as a control box on the top-right corner of the <li>.
The <div> is floated right, and should show up on the right.
When I refresh the page (in Chrome), the <div> shows up close to the middle of the <li> (as shown in the image on the left).
When I open Chrome's developer tools, and change the opacity (or any other css property) of the <div>, it shifts to the right (as shown in the image on the right).
I tried clearing Chrome's cache, but it didn't work.
Any Chrome-specific issues that might be causing this? (The page works fine in Firefox.)
CSS:
li {
position:relative;
}
div {
position:absolute;
width:40px;
float:right;
margin:0px;
}
(all other properties relate to fonts/colors)
Update: margin-right:0px seems to have fixed problem, but I'm still confused why changing the opacity moved the div around.
have you tried margin-right:0px;
if you are using float:right; try: clear:both;
what is your css? hard to help you this way.
If you are using position:absolute to place the div then make sure li has position:relative
li{
list-style:none;
position:relative;
display:inline-block;
}
div{
position:absolute;
right:0;
width:40px;
background:#333;
color:white;
border-radius:4px
}
DEMO
I am using JS to write HTML code where I need to display 2 images exactly overlapped.
The height and width of both are same.
What CSS properties can I use to do this?
Position relative on the container, and absolute on the images:
All of the above answers are missing the fact that you need to position a parent element with something other than static, or else you will be positioning them absolute to the browser window, which I presume you do not wish to do.
position: absolute will give your position in the container of the closest parent with some sort of positioning. So we give the parent position:relative; without declaring top or bottom, this way it will be 0px off from where it would normally be (i.e. no change, but still has position declared).
<div id="container">
<img src="data:image/png;base64,R0lGODlhAQABAPAAAC+byy+byywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
<img class="hide" src="data:image/png;base64,R0lGODlhAQABAPAAADCQIzCQIywAAAAAAQABAEAIBAABBAQAOw==" style="height:125px; width:125px;">
</div>
#container{
position:relative;
}
#container img{
position:absolute;
top:0;
left:0;
}
.hide:hover{
opacity:0;
}
http://jsfiddle.net/BLbhJ/1/
Edit: Added your hide functionality
Play around with the css in this:
http://jsfiddle.net/zuZxD/
I used opacity to display the overlapping.
<style>
.imageoverlap{
position: absolute;
top:100px;
}
</style>
...
<div class='imageoverlap'>
image1
</div>
<div class='imageoverlap'>
image2
</div>
Try that :D
If you set position to absolute, you can control where you want to place it.
<style>
#overlay{position:absolute; top:0px;}
</style>
<div id="layer1"><img src="img1.png"></div>
<div id="overlay"><img src="overlay_image.png"></div>
Now you need to position #overlay where you want it, by setting top and left positions, i.e., top:0px, left:300px;
i want to place a larger image than box on my site design (look at the link for image), its a part of my site design. i wants to use css method. iam now using dreaweaver and i want to code these image, please help me.
The size of white bg area is 737×323,(w×h) The size of yellow area is 275×323(w×h),
The size of fruit picture is 690×180. (w×h)
Image link
Here is something that should give you a starting point. The main trick is to use position:absolute. I recommend you read about what that means. Essentially, it lets you specify exact pixel coordinates of your page elements.
Note that the dimensions you give in your question are a little strange.You say the fruit picture is 690x180, for instance. But when I look at the image, it seems the fruit is basically square. Perhaps your image has a lot of transparent space? It is not clear without seeing the images themselves.
Also, on a real site you would probably want another nested <div> for the text itself, inside the yellow box.
Anyway, here is an example that just uses colored rectangles in the approximate arrangement your image shows:
<html>
<head>
<style type='text/css'>
.back {
position:absolute;
background-color:gray;
width:700px;
height:400px;
left:0;
top:0;
text-align:right; /* just to make the text readable in this example */
}
.text {
position:absolute;
background-color:yellow;
width:600px;
height:300px;
left:50px;
top:50px;
text-align:right; /* just to make the text readable in this example */
}
.fruit {
position:absolute;
background-color:red;
width:300px;
height:380px;
left:10;
top:10;
}
</style>
</head>
<body>
<div class='back'>the background</div>
<div class='text'>the yellow area</div>
<div class='fruit'>put the fruit image here</div>
</body>
</html>
There are many other ways to do it, of course, depending on how you cut up your images.
I'm using an absolutely positioned div to cover/mask another component and it works well except when one of those components is an element using certain display styles, like relative. When that's the case, the element (like an image button) is not masked and can still be interacted with, which is what I'm trying to avoid. This quick example code demonstrates the issue. Is there an easy way to make sure the "mask" div covers everything regardless of how it's positioned? I tried playing with Z-index but it doesn't seem to apply in this scenario.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Example</title></head>
<body>
<div style="height:200px; width:400px; background-color:green;">
<div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-color:black; opacity:0.5;"></div>
Test<br />
<input type="image" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="position:relative; top:25px;" />
</div>
</body>
</html>
Look this Fiddle
Note:
set position relative to wrapper div
set overlay width, height size
set z-index for elements (where you want to use z-index, you need to define position)
What browser id this an issue in?
I would try using this CSS first and then compare results in IE and FF
div {
position:relative;
z-index:1;
height:200px;
width:400px;
background-color:green;
}
div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}
div div input {
position:relative;
top:25px;
z-index:1;
}
There's a helpful resource to address this issue.
Long story short, if your absolutely placed div (.abs) is empty, IE doesn't like to place it in front of other elements regardless of z-index. You can use a 1x1 transparent gif to overcome this, eg. by adding the following style to the div:
background: transparent url('/images/clear.gif') repeat 0 0;
I've found this to help. It's great as there's very little additional styling needed and you don't have to explicitly manage z-indices as with other answers here.
Note: You may need to move the absolutely placed div to be the last element in the parent container.