PrateekSaxena Posted April 2, 2007 Share Posted April 2, 2007 Hi,I have a DIV called "container", this DIV is absolutely positioned as top:10px;left:10px;. There is another DIV inside it called" contained" as this too is absolutely positioned as top:10px;left:10px;. But it is positioning itself with respect to the whole document and not the DIV that it is contained in. How do I make it position absolutely with respect to the "container" div?? Link to comment Share on other sites More sharing options...
jlhaslip Posted April 2, 2007 Share Posted April 2, 2007 Try position:relative on the second (contained) div using the top and left offsets. I don't do lots of absolute positioning, but that just might work, if I understand how positioning works.*edit* <html><head><title>using relative and offset</title><style type="text/css">#one {position: absolute;top: 10px;left: 10px;background-color: #0000cc;color: #cccccc;height: 100px;width: 100px;}#two {position: relative;top: 10px;left: 10px;background-color: #00cccc;color: #ff3333;height: 100px;width: 100px;}</style></head><body><div id="one" /> one <div id="two" /> two </div></div></body></html> Link to comment Share on other sites More sharing options...
real_illusions Posted April 2, 2007 Share Posted April 2, 2007 absolute positioning goes from the top left corner of the window, no matter where it is placed in the code. Relative positioning is from the top left corner of whatever that div is contained in. So, in your case, the inner div is in effect 20x20 away from the top left corner of the page, but using relative positioning in your code, you can use 10x10 away from the top left of the container div.Or something to that effect anyway :) Link to comment Share on other sites More sharing options...
jesh Posted April 3, 2007 Share Posted April 3, 2007 Absolute positioning pulls (for lack of a better term) the element out of structure of the page and treats it similar to the way a float works. Absolutely positioned elements are positioned relative to the nearest containing element that has positioning set. If no container if found with positioning, it would be positioned relative to the body.Relative positioning moves the element relative to where it would normally appear in the structure of the page.e.g.: <style>.outer { position:relative; top:50px; left:50px; background-color: red; }.inner { position:absolute; top: 0px; left: 0px; background-color: green; }</style><div class="outer"><div class="inner">test</div>some random content</div> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now