My client gave me access to change just a part of his HTML and its like:
<div style="position:relative;">PUT YOUR CODE HERE</div>
The problem is that I need to put an absolute div left:0px and top:0px to stick in the top of the page but instead it sticks relative to the above.
Can I, being inside a relative div, position absolute elements to the window and not the parent relative div with just css without using any other trick? I mean, I dont want to use JS to calculate the top/left position of the relative and then subtract it from my inside absolute div.
Thank you.
No; not unless you know the distance to the top-left corner in which case you could use a negative top: and left: value.
Absolute positioning is relative to the closest ancestor with a non-static position.
Related
I have multiple elements with relative position and their child's having an absolute position. The moment is applied for all child absolute position, all elements are stacked on the same top and left value.
Can anyone explain me, what is the logic here?
At the bellow image, the difference between the Relative and absolute position shown
The point is that in the relative position: element position set according to the other elements that are in the page
and
For absolute position: element position set according to the window not any element in the page
The problem was when I applied for the absolute position I came out of parent and parent height and width become Zero. :D
I have div which hosts another div. Ok, I get the case when the parent is position:relative and
the child is position:absolute. I don't get what happens when
parent's position is absolute and child's position is relative
parent's position is absolute and child's position is absolute
parent's position is relative and child's position is relative
I use the JSbin example from Why does an absolute position element wrap based on its parent's right bound? but the question applies to positioning concept in general
Read more about absolute, relative, and fixed position and how they differ here, but I'll try to answer your question about relationships specifically.
position: absolute will position that element to its nearest parent with a position other than static. Static is the default for everything.
position: relative is a little weird because it really affects that element's children, not its own position. It's just saying to its child elements, "position yourself relative to me if you have position: absolute." A position of fixed or absolute does the same thing (meaning its positioned children will position themselves relative to its boundaries), but these styles also affect their own position on the page. An element with position: relative won't look any different, but its children might.
So consider a situation like this:
<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
If grandchild has position: absolute, it will position itself relative to the browser window because there is no parent with a position other than the default of static.
If parent also has position of relative, absolute, or fixed, grandchild will position itself relative to the boundaries of parent.
However, if child also has a position of relative, absolute, or fixed, the grandchild will position itself relative to child's boundaries, because it is the nearest parent with a position other than static.
In summary, relative affects an element's children, while absolute and fixed affect the element itself as well as its children.
And remember that position: fixed bypasses all relative and absolute parents and always positions itself relative to the browser window.
If the mommy is relative and the child is absolute : the mommy listens to her child. as if to protect him. sort of..
If they are both absolute : they have nothing to do with each other. they are strangers to each other.
If the parent is absolute and child relative : they are bound. the child moves ( width and height ) towards or away from his mommy.
It will always be a little strange, there are a lot of great texts about this, but also for me it is always just switching absolute and relative until it works. hope this clears it up a little.
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.
Maybe easier to the the site in progress - http://www.roadsafetyforchildren.co.uk/
I want to position the yellow text at the bottom of the page over the blue bar (which is an img).
I have a div that has position:relative;, within that is another div that has position:absolute;. I thought by doing that when you assign a top position to the absolute div it will take the top of the relative div as it's starting point? Mine takes the top of the screen as it's starting point, hence the massive top position.
Obviously I want the yellow text to move with the the blue bar depending how tall/wide the page is.
As far as I can see using position absolute is the only way to solve this?
Maybe I'm not understanding the whole notion of putting a absolute positioned div inside a relative one!
Your #footer div is absolutely positioned but it is not within any relatively positioned element. The only relative element I see is #actual-content, which is a sibling of #footer. If you place an absolutely positioned element WITHIN a relative element then it acts as you described.
The absolutely positioned div must be inside the relatively positioned div. That doesn't seem to be the case on the site you've linked.