How do you overlap an element over another element that is positioned relatively in Internet Explorer? Z-index doesn't work, it always appears behind the relatively positioned element.
Looks like I'm kidding, but I am not
.myLinkCssClass {
background : url(#);
}
You're not by any chance trying to put something over a combobox (select tag), iframe or flash movie right?
In those cases z-index is a lost cause.
Otherwise what browser version are you using and are you using absolute positioning?
I had a real pain with this problem that this particular workaround wasn't relevant for. It's a little hard to explain so I'll try using code:
<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
The problem is that setting the parent's z-index to a higher value would move it to the foreground instead of the back where its supposed to be. I stumbled upon a solution completely by accident: I made a copy of the foreground element (id=third) outside its parent.
<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
Its worth mentioning that in my original code the elements don't have IDs so I don't suffer from 2 elements sharing the same one and invalidating my HTML.
I think its safe to classify this weirdness as another bug that happens to help with the original, but it works, at least for me. Hope somebody finds this useful!
Create and then set an additional transparent background image on the element you want to have on top. For me it finally worked in IE8. SASS:
#galerie-link {
position: absolute;
z-index: 1000;
top: 25px;
left: 40px;
a {
display: block;
width: 185px;
height: 90px;
background-image: url(../images/transparent.png);
}
}
I wanted to note that if you are using IE8 and below, it does not support CSS3 filters. This was my issue.
I was using:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#black00', endColorstr='#black00', GradientType=0);
No matter what I set my position or z-index to, you could not see the other layer because it was causing a complete mask over that layer (instead of going from clear to black and to clear again).
By removing the CSS3 filter for just IE8, I was able to solve my problem.
Hope this helps someone who runs into the same issue.
I had the same problem in an html where many repeated relative positioned divs were blocking absolute positioned div's view. The workaround provided by www.brenelz.com, that I've already used with success wasn't working in this case. So, the following worked for me:
I removed the relative positioning from those divs I've mentioned first, then added a CSS to turn those divs on relative when hover. Let me show you the code:
Before:
DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}
After:
DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}
This way the others 'sisters' of that div stay with normal positioning and don't interfere with the layout.
It worked very well for me! I hope it helps you too.
Related
I have floating button set to position fixed with a z-index of 9999.
When I scrolls the page, some elements see through the button.
So I have set the element to position as relative with a z-index of 10, still sees through.
When I set to -1, it works, but then the element becomes unclickable.
How can I make this work?
#button {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
}
#carousel {
position: relative;
z-index: 1;
}
I've already done the research and saw this post, z-index not working with fixed positioning, but with so solutions to my issue.
Without the HTML and the rest of the code, it would be impossible to help.
From the code you posted, it should work.
It might be a problem from the Parents' Stacking Context.
If you have something like:
<div id="parent-1" style="z-index: 1">
<div id="myDiv" style="z-index: 9999"></div>
</div>
<div id="parent-2" style="z-index: 2"></div>
The [#myDiv] one will always be under the [#parent-2].
Because of the [#parent-1] stacking context (layer) is under the [#parent-2] stacking context (layer).
Another common issue is with using 'transform' on the Parent element, which opens up another bag of hurt.
I'm having some trouble here. I want to show an image when mouse is hovered above following div.
HTML:
<div id="testmouseover">
<img src="testmouseover.png">
</div>
CSS:
#testmouseover
{
left: -9px;
top: -9px;
position: absolute;
width: 865px;
height: 653px;
z-index:1;
}
I have 4 of these divs wich should display a different image, so how can I add an ID to the hover?
Can someone help me with writing the CSS code for the hover? It will be greatly appreciated!
Have an onmouseover() event attached to the div. You can take some pointers from w3schools.
In the function that is being called at onmouseover, change the innerHTML property to have the desired image.
This can be achieved even quicker using jQuery:
$("#divId").click(function(){
$(this).html("Ur image html here")
});
I think it's easier than you think: try #testmouseover:hover
If that's not the right answer, please share a code sample on codepen
Here is an html version if it helps. The z-index is for layering images (stacking) not for mouse overs if I am correct.
<img src="NORMAL IMAGE" onmouseover="this.src='MOUSE OVER IMAGE'" onmouseout="this.src='Normal Image'" alt="ALTERNET TEXT">
Try this, pure CSS:
#testmouseover img {
display: none;
}
#testmouseover:hover img {
display: inline;
}
Be sure to give the div some width and height so that you don't get weird flickering stuff. For multiple divs just give them different IDs and copy this CSS a few times. If all the divs are the same you could also give them all the same class, or give them a class with the above mentioned CSS and an ID with the div specific styles.
Example: http://jsfiddle.net/S44MS/
I ran into an issue with absolute position with a nested p tag. This JSFiddle demonstrates the difference. Based on the description on this question and the comment by user1334007 absolute positioning is relative to the first parent. Even though w3schools does not state that, it appears to be the case for div tags. For p tags, it seems that absolute is relative to the page as Michael Zaporozhets states in the SO answer and w3school describes.
With all these links in mind, am I making a mistake with my styles somewhere or are these performing differently? If they perform differently, can someone offer an explanation as to why this happens please? The main reason I am asking is this is a question in the 70-480 certification tests and even though I know the answer the say is correct, I would like to be able to use positioning with confidence going forward.
Code in jsFiddle link (required to have code to submit jsfiddle link so i just put it all in)
<h2>Paragraph Position</h2>
<p class="outer">Hello Outer
<p class="inner">Hello Inner</p>
</p>
<br/>
<h2>Division Position</h2>
<div class="outer">Hello Outer
<div class="inner">Hello Inner</div>
</div>
.outer {
position: relative;
background-color: red;
height: 100px;
width: 500px;
}
.inner {
position: absolute;
top: 15px;
left: 15px;
background-color: green;
}
If you take a look at the HTML (I looked with Chrome Inspector), you'll see that p.inner isn't actually inside p.outer. Because of this, p.inner will be absolutely positioned relative to the first parent element that has relative positioning or the html tag (in this case the html tag).
Edit: I looked in Firefox as well and it seems as if these browsers will convert nested p tags into separate p tags. So a p tag inside of another p tag will result in three sibling p tags.
I've on my site I've got two images inside their own parents divs (the full structure for each is div a img). The divs have fluid heights (height: 10%;). The images within are set to max-height: 100%;. The images size properly within Webkit, but every other browser seems to have problems with one or both. I've tried searching for possible solutions, but I can't even begin to imagine what the cause even is.
Since it's probably easier to just show you guys, here are the relevant pages and files:
Main page (the center logo image and the "CRASH" logo at the bottom)
CSS (the relevant divs are .logo and .crash)
Below is a breakdown of what I'm seeing. Thanks for any help!
edit: Never actually mentioned what the undesirable result was. In the browsers where it's broken, the images display at 100% -- not at 100% of the parent container, but at the full size of the image itself, breaking out of its container. Hope this clarifies things!
Browser / DIV | .logo | .crash
chrome 22 | works | works (same results on my friend's copy of Safari)
opera 11.61 | broke | broke
ie 9 | works | broke
firefox 12 | works | broke
I figured out it using Firebug in firefox 15.0 and got a solution, Hopefully it will work on all browsers.
1. Remove css rules defined for #footer and add those rules in .crash like below:
.crash {
height: 10%;
position: absolute;
text-align: center;
top: 82%;
width: 100%;
}
2. Add the following rules:
.footerNav {
position: absolute;
text-align: center;
top: 92%;
width: 100%;
}
3. And in .mod-languages replace existing styles with given below:
.mod-languages {
position: absolute;
text-align: center;
top: 96%;
width: 100%;
}
Additional Notes:
Your HTML structure is looking like this:
<div class="moduletable">
<div class="custom">
<div id="logo">
<a href="http://www.millioncranes.com">
</div>
</div>
</div>
So when you wrap moduletable with #footer like below:
<div id="footer">
<div class="moduletable">
<div class="custom">
<div class="crash">
<a title="CRASH Japan" href="http://crashjapan.com">
<img src="/images/crashlogo.png">
</a>
</div>
</div>
</div>
.. /*Another moduletable*/
.. /*Another moduletable*/
</div>
This causing a problem. The style of #footer applying on all moduletable elements inside #footer. So do not need to wrap these elements inside footer. Style your elements like you have styled for #logo, That's it!
Hopefully it will fix your problem in all browsers.
I'm afraid I only have a chromebook here, so I can't test on any non-webkit browser, but here's my guess:
For the rendering engine to know how to apply height: 100% it has to know for sure the height of the container element. People have wrestled with 100% height for a long time.
First, I would make sure your a is display: block so that the img definitely knows how high its container is.
Then I would play around with setting explicit heights for the imgs container elements, and see if any of those fix it - then when you know what the problem is you can find a solution. Hopefully.
Let me know how you get on.
Not all browsers support max-height; see http://caniuse.com/#search=max-height
You don't really say what aspect of the result you don't like: what exactly is the difference between what you expect to happen and what actually happens?
Evening All,
Had a question on whether or not the use of Absolute postioning in my context would be considered wrong by the CSS gods. Basically what I am doing is using it to position images for the header bar of my website.
We can use SO as a good example. So the main logo at the top of our page is StackOverFlow followed by a menu. On the right side we have Ask Question. Now pretend with me that both of those elements are pictures. Would it be considered within reason to absolutely position those so that we don't have to fight with any other CSS div positioning?
Cheers,
Mike
In my experience, you will generally find yourself disappointed with absolute positioning over, say, floats, meaning you'll find some nasty corner cases that will make the whole exercise a hair-pulling experience.
The one exception to that is relative+absolute positioning. When used properly that can be incredibly useful.
But to do a heading like on the SO site I would probably just use floats.
<div id="header">
<img id="left" src="image1.png">
<img id="right" src="image2.png">
</div>
with:
#header { overflow: hidden; }
#left { float: left; }
#right { float: right; }
Most of the time, that's problem solved.
It may be that only one of these needs to be floated. If its the one on the left:
<div id="header">
<img id="left" src="image1.png">
<div id="right">Some more content</div>
</div>
with:
#header { overflow: hidden; }
#left { float: left; width: 150px; }
#right { margin-left: 150px; }
I am guessing you will only need to absolutely position one of the two items you discuss. Leave the logo in normal page flow, and position the other item.
You could also use float:right on the one item, but that can be hard to troubleshoot across the spectrum of browsers.
I am not in touch with the CSS gods, but I say your plan of attack sounds like a fine use of absolute positioning.
Just be sure whatever wraps the two elements has position: relative
Absolute positioning can be really helpful when both elements are a different height
i would say probably easiest to make the right side image/div a float:right
that will let you shift things around fluidly