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.
Related
I'm trying to position the bird on this site: http://dane.helpful.ninja/fds/ inside the grey box. It should be positioned mid height.
I dont know why but it won't let me do this. Any suggestions?
Since the #birdy element has position: absolute, it is placed with respect to the whole document. You need to set a relative parent container.
.jumbotron {
position: relative; /* Add */
}
Output:
So I want to offset an element 5 pixels up. I set position: absolute and top: -5px. Now the element is positioned relative to the page, not the containing TD tag. Am I understanding absolute positioning wrong? It does say
position it at a specified position relative to its closest positioned
ancestor or to the containing block.
Ancestor is TD, right?
Similarly, the top definition says
For absolutely positioned elements (those with position: absolute or
position: fixed), it specifies the distance between the top margin
edge of the element and the top edge of its containing block.
So why does this JsFiddle render the table content block relative to the page, not the TD?
You're missing a position: relative; in the parent TD element. The TD doesn't include that by default.
JS fiddle. http://jsfiddle.net/2p225mv2/2/
CSS to fix it:
td {
position: relative;
}
Because you're missing the part that says: closest positioned ancestor with the key word being "positioned".
Add:
td {
position:relative;
}
and you'll get this jsFiddle example
When working with position:fixed; this is the expected result one would get:
What I actually want to achive is:
as in this result when working with two position: relative; elements
Don't get me wrong, I know how position: fixed or position: absolute works and should behave, how I haven't come around how to get both properties for the same div...
One approach wich works, but isn't a satisfying solution is that I put a position: relative -div below my fixed element, not allowing the second element moving below the fixed element because it is already taken by the extra div.
So I have tried to get this second relative div working with :after or :before pseudo-elements. This doesn't quite seem to work
div:after, div:before { position: relative; }
it somehow get's mixed up because the element itself is
div { position: fixed }
and turning fixed and relative around obviously also doesn't work because fixed will be bound to the relative - element.
Any ideas?
And if somebody is wondering why I need to use fixed and don't just go with relative : it's for scrolling reasons.
why not use a margin left on the relative div?
http://jsfiddle.net/q3nQr/1/
html
<div id="fixed"></div>
<div id="relative"></div>
css
#fixed { position: fixed; width: 60px; height:100px; background: red; }
#relative { position: relative; width: 300px;height:1000px; background: green; margin-left:65px; }
UPDATE
Take a look at the w3 spec for static positioning (just read the first two paragraphs).
http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
Absolutely positioned elements are removed entirely from the document
flow. That means they have no effect at all on their parent element or
on the elements that occur after them in the source code. An
absolutely positioned element will therefore overlap other content
unless you take action to prevent it. Sometimes, of course, this
overlap is exactly what you desire, but you should be aware of it, to
make sure you are getting the layout you want!
Fixed positioning is really just a specialized form of absolute
positioning; elements with fixed positioning are fixed relative to the
viewport/browser window rather than the containing element; even if
the page is scrolled, they stay in exactly the same position inside
the browser window.
This means that elements with fixed or absolute positions do not associate with any other elements in the document, this means they cannot effect the width of another element. If the width of the static element is not known, I think you will need manipulate the DOM with javascript; something as simple as (jquery, not tested):
var staticwidth = $("#static").width();
$("#relative").css('margin-left', staticwidth + 'px');
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 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.