固定在 div 元素上的位置

Question

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

维多利亚

以下网页和代码

<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 的设置来定义它的位置（默认是window) 的左上角，还有 width 和 height - 否则它将具有零宽度和高度，因此保持不可见。

补充：如果提到的所有四个设置（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 时，它用于浏览器 window。您需要放置顶部、左侧、右侧或底部值。如：

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

固定在 div 元素上的位置

Position fixed on div element

html

css

fixed

css-position