css - add and position a div without disturbing the rest of the document

I have to add a weather widget to a website whose markup is a tota开发者_运维百科l mess (it was converted from a wordpress site using a website copier). I can't add it to the current structure because it throws everything off, so I wanted to drop it in at the top of the document and use absolute positioning to deal with it. This works to an extent, but it falls short with different resolutions, browsers, etc. If I try relative positioning it pushes the rest of the document down. Any hints on what to research to solve this problem short of reading the css spec?

Update:

I was able to figure out a solution by combining the information that all of you provided along with "%". I used absolute positioning and set position:absolute;right:28%.

Thank you all for taking the time to answer so quickly.

I disagree with Joseph and Kasturi.

You want position:absolute

div#weather-widget{
  position:absolute;
  top:0px;
  right:0px;
  height:100px;
  width:150px;
}

Maybe setting height, width, font-size, line-height, etc. would help solve your browser inconsistency problems. Also, look into a CSS reset template.

Beyond that, you would really need to post some code for more definitive help.

Reference:

• Learn CSS Positioning in Ten Steps

This definitely needs a positioning attribute and I would suggest fixed. The only other option of taking it "out of flow" is to float it, but that could get messy.

so without further ado:

{
    position:fixed;
    top:0px;
    right:0px; /* or whatever */
}

And that's what I'd do anyhow :P

Position: fixed is what you are looking for... it doesnt disturb the rest of the document.... and you might need z-index to pop it on the front ....