Please help me with position:absolute for my Logo

Admittedly I have not used absolute positioning that much.

Not quite sure what I am doing wrong here. Check the link below. The logo is in maroon. What am I doing wrong with my css?


Wow, that was confusing. The problem is that your logo is saved at an enormous resolution.

1,500px × 860px .png

this image should be cropped as tight as you can get on it. After you do that, re-upload the image. Remove your absolutely positioning and the logo may fall pretty close to where you want it. If you want to move it use position:relative; in this case.

holy crap how did i do that lol… amateur mistake

Okay I changes it to relative and it bumped everything around a bit… What did I do wrong here?

EDIT: almost have it in the right position… but now it has bumped down the image of the beer beneath it?

You’re almost there!!!

Give #headerimg position:relative;

Then give img.logo position:absolute;

absolutely positioned elements are positioned in relation to the browser window.

UNLESS… they are contained inside a relatively positioned element. Then they are absolutely positioned in relation to the container that is relatively positioned.

<div style=“position:relative”>
<img src=“###” style=“position:absolute;top:3px;left:400px;” />


got it… thanks rusty!

So the parent element for an absolute element has to be position:relative?

oops sorry posted that before you posted that last one… thanks again rusty!

No prob. I’ll pm you my address to ship some of that fine looking brew!!!

Site’s looking good btw, the client should be pleased!

Thanks for the compliment! Design is my bag, still trying to master css

If you live anywhere near boardman ohio there is a huge beerfest coming up soon… sorry for the off topic but here is the site I just finished for the same guy