Position fixed on div element

Question

I am trying to give position fixed to the following div. But when i add position:fixed to css the element just disappears. Any suggestions will be appreaciated. Thanks!

Victoria

web and code below

http://vtwg.eu/ZMT/untitled3.html

<div id="book-now">
<a href="mailto:musictours@zzkrecords.com?subject=Music_Tours"><img 
src="book_now.png" alt="" width="90"></img></a>
</div>


#book-now{

background-image: url("back_2.png");
background-repeat: repeat;
text-align: right;
padding-right: 60px;
padding-top: 40px;
}

Answer 1

fixed elements are fixed in the browser . You have to define where you want it to be fixed by giving values of it top and right property

  position:fixed;
  top: 100px;
  right: 100px;

Answer 2

If an element has fixed position, you have to define not only its position with settings for top or bottom and left or right (default is the upper left corner of the window), but also a width and height - otherwise it will have zero width and height and therefore remain invisible.

addition: It there are position settings for all four mentioned settings ( top , bottom , left and right ), you don't need width and height, since those are defined by those positions.

an example:

 .x { position: fixed; top: 60px; left: 100px; width: 160px; height: 120px; background-image: url("http://placehold.it/60x40/fa7"); background-repeat: repeat; text-align: right; } 

 <div class="x"></div> 

and without width and height settings (ie invisible):

 .x { position: fixed; top: 60px; left: 100px;; background-image: url("http://placehold.it/60x40/fa7"); background-repeat: repeat; text-align: right; } 

 <div class="x"></div> 

Answer 3

When you use position:fixed, it is for the browser window. You need to put top, left, right, or bottom value. Such as:

#book-now{
    position: fixed;
    top: 50px;
    left: 50px;
    background-image: url("back_2.png");
    background-repeat: repeat;
    text-align: right;
    padding-right: 60px;
    padding-top: 40px;
}