does anybody know a way of positioning an element to be always in the same position, but having different parents that are in another.
Ok to make is clearer here is an example. You have horizontal dropdown navigation, when u hover over one navi element, u see subnavi just under the element you hover over, how can I make it to appear on, for instance, top left corner of the screen, always. Next button will be next to the first one, for about 100px right, and now when u set pos absolute or relative, the subnavi wont be exacty in the same position as the first one, but 100px to the right. And also, I can't use special class or ids, only global classes.
Without your code its hard to answer your question, I however give it a try:
You can make it by applying position: absolute; left: 0px (change left to your wishes, and add a top: 0px if you want to adjust the stating height), to your submenu, check this demo.
Note that the submenu only appears when you hover the parent. On blur, it disappears. When you want it to stay, you'll need some javascript (or jQuery).
position the parent DIV "relative" than you position the child div "absolute".
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Related
In the example here, I notice if you take away the margin-left:200px from the first section element, it expands its width to fully match the container, but it doesn't go below the nav element, which is has position:absolute. Instead, it's overlaid by the nav element, as if it got a lower z-index. Why is that? Aren't both these elements in the flow of the document? So that means they should come one right after the other right, with the section element appearing under the nav element (this happens when I remove the position:absolute)? Why are they overlaid each other instead?
Aren't both these elements in the flow of the document?
Nope! position: absolute; specifically removes elements from the flow.
As referenced in this answer, absolute positioning uses current positioning context. An element with position: absolute; is still affected by its parent, however it is completely independent of its siblings.
I have positioned a sidebar element at the right side of the visible part of the screen (this part already works!). The sidebar consists of several DIVs. A few of them I don't care about, but the last (lowest) one should not "disappear" when the user scrolls down the page. And here is where I'm stuck. In a way, the top position should not be < 0 of the visible top of the browser window. Is that even possible with CSS and the better browsers?
Here is my definition of the sidebar:
div#sidebar{font-size:95%; float: right;width: 150px; margin-top:20px;}
div#sidebar div{padding: 5px 0;margin-bottom: 5px}
Here is the element I would like to keep inside the visible part of the screen:
div#navtop{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px;}
div#navsoc{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px; top:!important 0px;}
The second element, "navsoc", should remain in the visible part. But it moves exactly like "navtop" and the others I have defined there.
<div id="sidebar">
<div id="navsoc">
keep me inside the window!
</div>
</div>
I think you need
position:fixed;
So the element will be positioned relatively to the window, so if you scroll it is always visible.
Demo: http://jsfiddle.net/mJubt/
Moreover, if you want to set !important to a value, use top:0!important instead of top:!important 0.
And when you have 0px you don't have to write the unit, you can use just 0.
if you use top in CSS you should make sure that the element's position is not static (default) but absolute, relative or fixed. So, top:0 in this case is not working. And if you do change the position to either of those it would behave in different ways:
if it's fixed the element would be position relative to the window
if it's relative or absolute it would be position zero pixels from the top of the closest element in the DOM with a position different than static.
If the contents of the element above #navsoc has a flexible height you can't make it respect it's position and at the same time not move on scroll.
You need Javascript to achieve that.
The first part is a bit off topic back I think it is good to know it!
Here you have the fiddle.
I know that I can hide an element without removing the space it would occupy by using visibility: hidden. What I want to do is the exact opposite: I want to render the rest of the page as if the element wasn't on the page, but keep the element visible.
The reason I'm asking is because I have a centered 950px-wide layout to which I want to add a little box on the left side of the screen. It would look kinda like this:
Right now I have a <div> that holds the side box as the top element in my 950px page wrapper, which is also a <div>. To the side box I've applied position: relative and left: -200px (box width) to move it to the side, but that still leaves me with the main content being pushed down. Am I approaching the problem correctly? Is there a logical way to remove the vertical space that was left behind by the side box?
Just use position: absolute;. The element will no longer be part of the document flow, and you can position it relative to its closest non-statically positioned ancestor.
Position relative will still occupy the space. Try position:absolute; It will place the element absolutely inside its parent but above all of its siblings.
This question goes to the css wizards. I've googled this and couldn't find an answer.
At this point I'm not sure it's possible:
How do I specify the position of an element within another element, semi-absolutely so to speak?
I want to say "Put element inner x pixels to the right of outer's left border, no matter where outer happens to be at the moment."
This might be possible with javascript, but shouldn't it be possible with css?
#inner {
position: absolute;
left: 10px;
}
What this CSS actually does is position the #inner element 10px from the left border of its 'closest' parent that is has a position value of absolute, relative, or fixed. If no such element is found, it is absolute positioned relative to the body element, but if you make sure that the inner element has a parent that has its position defined with CSS, it will be positioned absolutely within that parent.
Take a look at this JSFiddle. First, look at the html and CSS to see how it was constructed, then go ahead and use your mouse to drag either of the element around (that's what the javascript in their does, its purely for demonstration purposes). Notice how when you drag the outer element, the inner one moves with it? All you are doing when you drag the elements around is changing the values of their top and left properties, and since its parent is absolute positioned, the child element will stay at the same spot within it no matter where you move it on the screen. :D
Absolutely, it's easy! All you have to do is specify the parent to have a position (either relative or absolute) and then the absolutely positioned child will be positioned "relative" to the closest positioned parent.
Confused?
I have a fiddle here. I set float left & width(20%, 80%) for the li's. It looks good now.
For some reason(actually, its an another story!) i want the set position: absolute for div.content.
If i do, the moreContent div comes to the left like this.
I don't understand why its happening like this because, i set the parent of content div's
position as relative. So, it should be inside the li.
I just want to keep the same layout with the div.content positioned as absolute.
How to do it.
Thanks!
The problem is that when you position div.content as absolute, it then has no influence of the position of the other elements. I'd suggest setting a margin, this will then mimic what div.content would do if it wasn't absolute: http://jsfiddle.net/ahmednuaman/MQ6Rg/3/
Absolute position is outside the normal page flow - ie nothing to do with the position of other items on the page.
Once you set an element to be 'absolute', it's basically removed from the page's DOM for positioning calculations. Making .content be absolute means that .moreContent now has nothing "left" of it to float against, so it moves right up to the parent container's bordre.