You need to tell your container to have a position of relative, then absolutely positioned elements inside of it will position themselves off of it, and not the entire screen.
Code:
#container {
width: 768px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#container #logobar {
background-color: #FF0000;
height: 60px;
color: #FFFFFF;
}
#container #navbar {
background-color: #0000FF;
height: 40px;
color: #FFFFFF;
}
.yourImage {
position: absolute;
right: 0;
top: 10px;
z-index: 10;
}
width: 768px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#container #logobar {
background-color: #FF0000;
height: 60px;
color: #FFFFFF;
}
#container #navbar {
background-color: #0000FF;
height: 40px;
color: #FFFFFF;
}
.yourImage {
position: absolute;
right: 0;
top: 10px;
z-index: 10;
}
Code:
Content for id “logobar” Goes Here
Transparent .png image120px high…I would like this to be positioned on top of the "logobar" and "navbar" divs on the right hand side so that the content of the 2 divs show through the images transparency (image should drop below navbar)
I have done this using absolute positioning but it looks awful if the browser size is changed ie. position of image moves left or right. Is there anyway of doing this so the image does not move?
