I have a div that when you mouseover has a child div appear to display information. The basic code is as follows:
HTML
<div id="container">
<div id="hidden_div">
<iframe></iframe>
</div>
</div>
CSS
#container {
position: absolute;
height: 20px;
width: 40px;
top: 8px;
left: 30px;
}
#hidden_div {
position: absolute;
background: url(../_images/inside_btn_back.png) repeat;
height: 60px;
width: 350px;
top: 0px;
left: 0px;
margin-top: 20px;
z-index: 50;
display: none;
border: 1px solid #a08f89;
}
#container:hover #hidden_div, #container.over #hidden_div, #container:focus #hidden_div {
display: block;
}
This works in all browsers except IE(specifically IE9). I have a navigation window using the same method for a drop down menu that works fine in IE. don't know why its not working with the div. Here is a link to the live page here. The mouse over div is the facebook like button near the bottom of the page.
it's the page loaded in the iframe not having a transparent background which causes the hover to fail in IE.
Related
I have 3d canvas with z-index : -1
I want to display components on z-index: 0 and be able to click 3d canvas without any problems. Unfortunately when I add component A to z-index: 0 margin of this component is spread horizontally and I'm unable to click 3d canvas one the left and right side of component A.
.background-3d-canvas {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background-color: silver;
}
.front-component {
background-color: blue;border-radius: 10px;
padding: 20px;
margin: auto;
width: 300px;
background-color: blue;
}
<div class="background-3d-canvas">
Test<br/>
Test2<br/>
Test3<br/>
Test4<br/>
Test5<br/>
Test6<br/>
</div>
<div class="front-component">
Editor
</div>
I created jsfiddle to demonstrate this problem. Not all links are clickable.
https://jsfiddle.net/ec5uuthy/
You can add those attributes to .front-component:
pointer-events: none;
position: absolute;
left: 0;
right: 0;
https://jsfiddle.net/76bpqge1/
I think this question is related to Link not working inside floated div but I still can't figure it out.
I have a div as follows:
.fullwidthimage {
width: 100%;
position: relative;
z-index: -1;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 1;
top: 15px;
width: 100%;
}
#homepagebutton {
position: absolute;
text-align: center;
z-index: 100;
bottom: 50px;
width: 200px;
height: 60px;
left: 50%;
margin-left: -100px;
font-size: 25px;
border: 1px solid black;
border-radius: 5px;
background-color: orange;
color: black;
text-decoration: none;
}
<div class="fullwidthimage">
<img class="noround imageundertext smallimg" src="http://placehold.it/600x800">
<img class="noround imageundertext midimg" src="http://placehold.it/1000x1000">
<img class="noround imageundertext bigimg" src="http://placehold.it/3200x1300">
<img class="noround imageundertext xlimg" src="http://placehold.it/5000x1500">
<h1 class="imageoverlay">Title Here</h1>
Get Started
</div>
The different images are using a CSS media query to display/hide at different sizes. The whole thing is a full width image with a text title and 'button' (that's actually just a link styled to look like a button) over the top of the image.
Whatever links I put inside that div won't work - the text shows on the page, but nothing happens if you mouse over.
Why?!
Links placed immediately outside of the div on the same page work just fine, so I don't think it's anything to do with other containing divs there.
I'm assuming from that previous question asked that it's something to do with the positioning, but I can't make it work.
Thanks!
If you give a -1 in z-index, it goes behind body. So the whole div.fullwidthimage becomes unclickable or unaccessible. So, give z-index: 1 as the starting point.
.fullwidthimage {
width: 100%;
position: relative;
z-index: 1; /* Change this! */
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 2; /* Increase this! */
top: 15px;
width: 100%;
}
I am trying to set a div at the right side, superimposed to a video tag element which has a poster attribute but for any reason, when I set the property right: 0 to align it at the right side, it is aligned to the right side of the document.
<div class="screen-container">
<div id="delete"></div>
<video id="preview"></video>
</div>
#screen-container{
width: 515px;
height: 600.23px;
}
#delete {
width: 40px;
height: 40px;
background-color: white;
background-size: 500px;
background-position: -97px -75px;
margin: 10px 10px;
cursor: pointer;
position: fixed;
z-index: 1;
}
#preview{
width: 100%;
height: 100%;
}
I have also tested to put the <div id="delete> inside the <video> but the <div> element wasn't vissible.
<div class="screen-container">
<video id="preview">
<div id="delete"></div>
</video>
</div>
Any idea of what is happening?
Thanks in advice
fixed positioning removes the element from the flow of the document and can not be contained within a parent. Use position: absolute instead and set the parent .screen-container to position: relative.
Following the answer of jmore009, I had a problem with elements that were comming behind.
To solve that other case, I just added did what I show at the code below:
<div class="screen-container">
<div id="delete"></div>
<video id="preview"></video>
</div>
<div class="screen-aux"></div>
.screen-container{
position: absolute;
}
#delete{
width: 40px;
height: 40px;
background-color: white;
background-size: 500px;
background-position: -97px -75px;
margin: 10px 10px;
cursor: pointer;
position: absolute;
z-index: 1;
right: 0;
}
That allows me to add vissible elements behind by keep using position relative.
Thanks!
I have a content div with a ragged border (using a border-image) and I place another div each below the content div left and right to hold an image. This image is supposed to have a link. While the image shows nicely through the border the link area gets hidden by it. Given that my ragged border is rather wide (almost 100px), this feels quite confusing. Therefore I would like to "float" the image below the border and the actual link area above so that the link is clickable as well were the image is under the border or visible through the border.
Despite not having the background-image uploaded the effect becomes visible since the border is wide black. The structure includes a minimal header, which is not vital to the problem but is part of the root structure.
Another problem is that the link area expands to more than the wrapped image in height, however this is a minor issue.
http://jsfiddle.net/hc3jrkku/
Basestructure:
<header>
<nav>
<a href='?p=faq#faq' id='faq'>
FAQ
</a>
</nav>
</header>
<div class='leftSide'>
<a href="#anchor" class="bgImage"><img src="img/some.png" style="
position: relative;
z-index: -1;
opacity: .99;
border: 1px solid red;
width: 150px;
height: 200px;
background-color: red,
"></a>
</div>
<div class='rightSide'>{$right}</div>
<main>
<div class='container'>
{$content}
</div>
</main>
</body>
CSS:
* {
box-sizing: border-box
}
body {
margin: 0;
}
.leftSide{
position: fixed;
z-index: 0;
top: 20px;
right: 50%;
transform: translateX(-50%);
width: 808px;
height: 100%;
display: flex;
justify-content: flex-end;
margin-right:-93px;
padding: 15px 93px 90px 0;
}
.rightSide{
position: fixed;
z-index: 0;
top: 20px;
left: 50%;
transform: translateX(50%);
width: 808px;
height: 100%;
margin-left:-93px;
padding: 15px 0 90px 93px;
}
a.bgImage {
z-index:900;
opacity:.99;
border:2px dashed blue
}
.rightSide .bgImage {
margin-left: -93px;
}
.leftSide .bgImage {
margin-right: -93px;
}
main {
width: 808px;
min-height: 400px;
margin: 20px auto 0;
position: relative;
z-index: 50;
border-style: solid;
border-width: 0px 93px 127px 93px;
border-image: url(img/paperedge.png) 0 93 127 93 fill round;
padding-top:10px;
}
header {
height: 20px;
background: #ffffff url(img/header_bg.png) repeat-x bottom;
border-bottom: 1px solid #000000;
position: fixed;
width: 100%;
top: 0;
z-index: 100
}
nav {
display: flex;
justify-content: center;
}
Having read http://philipwalton.com/articles/what-no-one-told-you-about-z-index/, I tried creating new context(s) as well, and stripping the divs containing left/right background image of the z-index, However my current code depends on the transform/position thus creating a new context for the parent element either way. Is the sandwich stacking (some children above other parts of the page/others below) possible anyways?
If you want the image to be behind the border (or your content div), you can add this to the CSS of your div in the front:
main {
pointer-events: none;
}
This will kill the events on your div and make the behind events visible in the front: DEMO
You can also search more and find these similar topics:
HTML "overlay" which allows clicks to fall through to elements behind it
HTML/CSS: Make a div "invisible" to clicks?
I have a popup panel which shows nice on chrome and FF like this:
It's a grey iframe with this css style:
element.style {
z-index: 25000;
opacity: 0.5;
position: absolute;
background-color: black;
border-width: 0px;
top: 0px;
left: 0px;
width: 1366px;
height: 361px;
visibility: visible;
}
which contains a DIV:
element.style {
position: absolute;
z-index: 25001;
background-color: transparent;
left: 0px;
top: 0px;
width: 1366px;
height: 361px;
}
which contains another (main) white div:
element.style {
width: 400px;
overflow-y: auto;
overflow-x: hidden;
z-index: 25002;
visibility: visible;
position: absolute;
left: 483px;
top: 77px;
}
I do not understand why on IE 8 the panel with those tabs is white also, so basically it should be in the background like on Chrome...:
Do you have any clue?
I'm almost sure the problem is on the panel with the tabs and not on the popup one...
The css of the panel with the tabs is:
element.style {
width: 280px;
height: 500px;
position: relative;
}
UPDATE:
Panel tab is actually a table with the above style.
Ps: Do not blame me about css for the popup. Is mainly generated by the icefaces component.
Finally, solved...
Added this style to the div which contains the panel tab:
position: relative;
z-index:-2;
Please note that I've tried with z-index:0 or positive but was not working so a negative one was required...
The single drawback for this solution is that now, the parent div with its panel tab does not appear on Firefox.
Grr... I really hate IE.
UPDATE: I ended up using jQuery to put to that div, a negative z-index only for IE.