On this website: http://fa-aft6157.org/ , when viewed in IE8, when you hover the mouse over the links on the left they appear at the top of the page. How can this be fixed in the HTML code?
Whenever you position an element absolutely with css, the element is positioned relative to the closest parent that has position defined.
I think your problem has to do with the fact that all of your menu DIVs are direct children of BODY. You may have better luck placing your menu DIVs inside a parent DIV that has position defined.
Related
I'm following a tutorial on how to build a website in dreamweaver (https://helpx.adobe.com/dreamweaver/how-to/make-website-pt6-web-links-navigation.html) However I'm trying to understand why a certain step in the tutorial works as it does.
I have an absolutely positioned element #navlink, here's it's position in the DOM structure:
nav
h2 #menulink
ul #navlink
nav
visually looking at the result, ul#navlinks gets removed from the page as per absolute flag, but instead of getting anchored next to the last positioned element, which is the html page (since no element above ul is positioned relative or otherwise) it jumps to the h2#menulink that is above it in dom.
I'm not sure if it's just a mistake in my code and that I am inedvertantly positioning the h2 or nav element in some way, or that I overlooked some other reason of why the document flow attachment point is being overriden, but I cannot find the mistake no matter how many times I go through the code.
This is a link to a full source code as well as the rendered page as I have it in jfiddle:
https://gist.github.com/anonymous/5d8bde1f196b919dab297560ff85b072
This is expected behavior. Your code is correct, and so is the browser. For absolute positioning, it is anchored "next to the last positioned element" horizontally only when left or right property is defined, and vertically only when top or bottom property is defined.
If there is no top, bottom, left or right defined for ul#navlink, it will be "removed from page", but positioned as position: static.
I am trying to show a hidden Div on click event using JS. This Div contains UL which sometimes happens to be of height more than the parent Div. In such cases, parent Div scroll appears.
What I want is to show this list inside a child Div, on top of parent Div. This way the height of list will not affect the UI of page.
Here's the image of what's happening :
Note: Blue border represents the parent Div & list with grey background is inside a child Div.
And I have already tried applying position:relative;z-index:9999;
Make sure to give the parent a zindex (lower) too. See Z-index does not work in ie fir more ideas.
I am having a z-index issue. I have a couple of div that sit on top of each other, within them div there is some content which shows on mouseover. This content is currently being displayed behind the parent div.
The parent div have a z-index: 2 as they need to be displayed above there own parent.
<div class="activity-display"><!--parent div z-index: 2-->
Running<!--This is displayed on hover underneath its parent div, but gets hidden underneath the below activity-display-->
</div>
<div class="activity-display">
Running
</div>
I have tried adding a higher z-index to the anchor and this doesn't solve the issue
Any help would be greatly appreciated
When using the z-index property elements must be positioned. Change the a tag to position:absolute.
You should at least give the elements you want to work with z-index a relative position, because z-index doesn't works on a static position. So really any other than the default position works.
You also don't need to rearrange children or parents elements, because children elements will always be over the parent. In other words, a child element will always have a z-index + 1 relative to the parent.
Please make a fiddle, so that we can help.
Also, some points to keep in mind, z-index works for elements position absolute.
I'm trying to use z-index to layer a button and a div. The button appears behind the div, while according to z-index it should be in front of it. Here is the style elements associated with the button & div as captured by Firebug:
Note that the button has a z-index of 2, the div has a z-index of 1, and both are position:relative.
Full HTML is in this pastebin.
z-index is a relative, not an absolute value.
An object with z-index 10 billion will not appear on top of all elements on the page, only on top of other elements in the same stacking context
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
In the CSS hierarchy you posted, it looks like the button and div are contained in different elements (#note18 and #note19), so you'll have to make sure that those elements aren't creating different stacking contexts which will make any z-indexes for elements inside them irrelevant to each other.
I have a CSS tooltip, with CSS3 fade in, with z-indexes set to 999. When I hover over the link, the tooltip itself pushes my other content down, it's meant to be above, not inline, although I've used a span and converted it to block..
Here is an example of what I'm going for, how can I stop it from pushing the content down?
Thanks.
Display:block doesn't take an element out of the page flow, it simply pushes it onto its own new line. Using position:absolute - as recommended by other posters - should work for you. Position:absolute will set a position (such as top:0px; left:20px;) to the browser window overall unless there is a parent with position:relative set (which would then become the point of reference). An example of this second type would be positioning a link exactly 30px from the right within a given content div - regardless of where that div is placed on the page.
Position:relative can be used to position an element relative to its original position in the natural page flow, and it leaves a space where the element would have been. Position:fixed can be used for elements that should not move when the page is scrolled (such as a fixed navigation bar, page branding, or footer). Position:static is the default position setting, and should be used when you need to override another position type.
If you're using a span for the tooltip text within another element - you'll likely want to set the parent element to position:relative, and set the inner span to position:absolute. You'll need to set a top and left value to adjust where exactly your tooltip text falls (ie. above or below the parent element, to the left or the right).
I hope this is helpful.
Absolute position the tooltip (set the container's position to relative and the absolute position will be relative to the container).
Did you make sure the tooltip css position value it absolute? (or at least not static).