固定在div元素上的位置

Question

我正在尝试将职位固定在以下div。 但是当我添加position：fixed到CSS时，元素就消失了。 任何建议将不胜感激。 谢谢！

维多利亚

下面的网站和代码

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的。 您必须通过指定top和right属性的值来定义要修复的位置

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

Answer 2

如果元素具有固定位置，则不仅必须使用top或bottom ， left或right （默认值为窗口的左上角）设置来定义其位置，还必须定义width和height -否则宽度为零和高度，因此保持不可见。

另外： top提到的所有四个设置（ top ， bottom ， left和right ）都有位置设置，您不需要宽度和高度，因为它们是由这些位置定义的。

一个例子：

 .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> 

并且没有宽度和高度设置（即不可见）：

 .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

当您使用position：fixed时，它用于浏览器窗口。 您需要输入顶部，左侧，右侧或底部值。 如：

#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;
}