Question

我正在尝试将位置固定到以下div。但是当我添加位置时：固定到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。您必须通过提供<{1}}和top属性

的值来定义您想要修复的位置

right

Answer 2

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

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

一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用position：fixed时，它适用于浏览器窗口。您需要输入top，left，right或bottom值。如：

#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元素上

3 个答案: