Make div fixed at one point in html

Question

I have a div containing two buttons, and I want the div to be fixed in place, and if I resize the browser, it should not change its position.

I tried to use the position: fixed, but it doesn’t work, and when resizing, the position changes.

This is my CSS:

html { height: 100%; } body { margin: 0; padding: 0; width: 100%; background-image: url('../images/bgPat3.png'); background-repeat: repeat; } .Imagebuttons { position:absolute; top:494px; right:337px; } 

This is my DIV container:

 <div class="Imagebuttons"> <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/images/Image1.png" /> &nbsp;&nbsp;&nbsp; <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/images/Image2.png" /><br /> </div> 

Here's what it looks like now:

Before resizing:

After resizing:

Answer 1

Use css left instead of right , so it stays in the same place.

Using right , you specify the add-on on the right side of the browser window / browser element. And, changing the size of the window, you will change the position of the right side, but the indentation remains the same. Here is a demo

Answer 2

This should not change since you are using position:absolute .
However, you can add width and height to div.Imagebuttons to prevent the file from resizing when the window is resized.

 .Imagebuttons{ position:absolute; top:494px; right:337px; width:200px; height:100px; } 

Answer 3

If your div is inside another div that has a position: relative this can happen.

Put your absolute div just inside the body tag to check.