Question

I have an element on my page that i want to position using “position:absolute”. Therefore, I have added “position: relative” to #pagewrap. I now want to do the same thing for other elements in the #page, but when I also add “position: relative” to that, all the elements before having #pagewrap as a parent now switches to #page.

The element I am talking about is: #copyright-logo

What do I do to avoid this?

#pagewrap {
width: 1050px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
-moz-border-radius: 15px;
border-radius: 15px;
position: relative;
}

#page { 
width: 960px;
margin: 0px auto;
background-color: rgb(255,255,255);
overflow: hidden;
 }

#copyright-logo {
position:absolute; bottom: 10px; right: 10px
}

Answer 1

Absolutely positioned elements are positioned relative to the nearest enclosing positioned element, which may be another absolutely positioned element or alternatively a fixed or a relatively positioned element.

CSS position property