I am trying to do a vertical dropdown menu. This is my code
.menu li:hover>ul{
position:absolute;
display:inline;
left:120px;
top:100px;}
I use position: Absolute to remove the sub-menu from the table, once the menu gets hovered. It appears that, if I do not indicate top or left property. The sub-menu will displayed relatively. Now I need to adjust the position relatively but seems that only the left property works. So my sub-menu left position is 120px relatively away from its original position. But the top is 100px away from the top of the window, rather then to the original position. How do I move the list up relative to it original position? I cant use position:relative because I need the sub-menu to be remove from the table.
You need to give it's container a relative position, like this:
.menu li:hover { position: relative; }
This way the positioning of the <ul> inside is absolute, but relative to this container instead of the entire window, which seems to be what you're after.
Related
When I apply relative positioning to image it doesn't going to the right. But when I use absolute positioning everything is OK. I can't seem to figure out why relative positioning doesn't work. Any help is appreciated.
img {
display: block;
position: relative;
top: 0;
right:0;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
You need the elements to be displayed inline. For this set the display property to inline-block for both the images and use floats to position the second image relative to the other. I suggest reading up some good material on CSS positioning and element types.
img {
display: inline-block;
position: relative;
top: 0;
right:0;
}
.one {
display: inline-block;
position:relative;
float:right;
clear:right;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
<img class="one" src="http://img.jgi.doe.gov/images/img-user-forum.png">
Relative positioning does not work with bottom or right because :
Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
So, right would make the element offset from the original position(ie. the edge of the first image), not the edge of the container.
The use of left, top, right, bottom in relative block elements will not align the elements according to the parent relative element, BUT related to the normal element position - TO ITSELF. So top: 0 means it will move 0px from the normal position. It will stay there. Relative to left:0 means exactly the same thing - 0px distance from the normal element position.
On the other side, absolute elements relate to the parent relative element, not to the actual normal position of your img. So that's how it works and stays top right.
If you hover over the User menu, then the menu shows up at left = 0. But, it should show up exactly under the User 'button'. How can I accomplish this? (only CSS3)
Add this rule to your CSS:
.menu > li {
position: relative;
}
Explanation: if you specify position: absolute on an element, top and left will be relative to the first parent element that has any position other than static. If no element like that is found, it will be relative to the page (like in your case). Specifying position: relative is the easiest solution because the element won't be taken out of the document flow.
I am quite accustomed to CSS but I have a problem and would like to know if there is a solution.
If I have a div with relative positioning and z-index:2 and another div next to it with z-index:1. Is there a way to have an element in the second DIV rise on top of the first. Z-index:3 will not do it because it is inside an element at z-index 2.
.div1 {
position:relative;
z-index:2
}
.div2 {
position:relative;
z-index:1
}
.inner element {
position:relative;
z-index:3
}
Any ideas.
Marvellous
Assuming I understood your question correctly - No, the element you want on top will have to have a higher z-index.
http://jsfiddle.net/Wgsqd/
You would have to use javascript to access the left and top coordinates of the relatively positioned element, and then set its position to absolute to free the element of its parent's z-index.
If you're using JQuery
var top = $(".inner").position().top();
var left = $(".inner").position().left();
$(".inner").css({
position: "absolute",
top: top,
left: left
});
I have a web page with a CSS dropdown navigation menu. My issue is that when I hover over the top of the menu to make the dropdowns appear, everything else in the page moves to make space for the dropdown instead of the dropdown moving over everything else. My navigation links are in a div element with the id "header" and my CSS for that element looks like this:
#header {
width: 100%;
z-index: 100;
position: relative;
}
None of the elements in the page that are moving are inside the header and non of them have a z-index specified. Can anyone tell me what I'm doing wrong?
You need to add position: absolute to the submenus that appear when you hover over a menu button.
See here for a tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/
Also relevant: http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Change position to absolute and make the position of the parent container relative.
Or, in the opposite direction, create another container within #header and stuff everything inside it.
The key point is that the inner element needs to be absolutely positioned, but in relation to its parent. Therefore position parent relatively.
I have a nested ul (menu) and want to position the nested menu directly beneath the containing menu, starting on the same horizontal position as the outer menu.
See Example
In this example the nested menu is positioned too far to the left and a little too high (it should start vertically where the containing menu ends).
I might use left: 0px; as showed here to fix the horizontal position, but that still doesn't fix the vertical position.
You can use top:40px; to fix the vertical position
Like here: http://jsfiddle.net/zdkb5/2/
I fixed it with:
margin-top:10px; to the #menu > ul > li > ul class
Demo
The height of the outer container is irrelevant.