[css] Float a div right, without impacting on design

I want to float a div to the right at the top of my page. It contains a 50px square image, but currently it impacts on the layout of the top 50px on the page.

Currently its:

<div style="float: right;">
  ...
</div>

I tried z-index as I thought that would be the answer, but I couldn't get it going.

I know it's something simple I'm missing, but I just can't seem to nail it.

Try setting its position to absolute. That takes it out of the flow of the document.

If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:

position:absolute;
right:0;
top:0;

If you want it to float at the right of a particular parent section, you can add position: relative to that section.

Try setting its position to absolute. That takes it out of the flow of the document.

If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:

position:absolute;
right:0;
top:0;

If you want it to float at the right of a particular parent section, you can add position: relative to that section.

If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:

position:absolute;
right:0;
top:0;

If you want it to float at the right of a particular parent section, you can add position: relative to that section.

Try setting its position to absolute. That takes it out of the flow of the document.