Question

大家。我正在尝试制作一个固定位置的按钮。问题出在小屏幕上，它完全消失了。

我的css代码

.sound_button{
  background:  #FFD700 url("Images/background1.jpg") center ;



}
.sound_container{
  position: absolute;
  left: 1180px;
  top: 520px;

}

我的HTML代码

<div class="w3-container sound_container w3-mobile"">
    <button class="w3-button w3-circle w3-xxlarge sound_button"><i class="fa fa-music"></i></button>
</div>

感谢任何帮助

由于

Answer 1

问题是您的按钮正在屏幕上放置在较小的屏幕上。小屏幕的屏幕尺寸可能为1136 x 640像素（对于其他设备，屏幕尺寸较小）。因此，您当前的top和left属性会将其置于许多小屏幕的视野之外。

一种解决方案是使用媒体查询将按钮定位在不同大小的屏幕上的不同位置。下面的代码段会将按钮定位在小屏幕上100px（顶部和左侧）。任何宽度超过900像素的屏幕都会将按钮移动到1180px和520px的顶部和左侧。

.sound_button {
  background: #FFD700 url("Images/background1.jpg") center;
}

.sound_container {
  position: absolute;
  left: 100px;
  top: 100px;
}

@media (min-width: 900px) {
  .sound_container {
    left: 1180px;
    top: 520px;
  }
}

<div class="w3-container sound_container w3-mobile">
    <button class="w3-button w3-circle w3-xxlarge sound_button "><i class="fa fa-music ">Button</i></button>
</div>

如果您希望它与屏幕大小成比例移动，请使用left和top的百分比。下面的代码段将按钮从左侧50％定位，从顶部50％定位。

.sound_button {
  background: #FFD700 url("Images/background1.jpg") center;
}

.sound_container {
  position: absolute;
  left: 50%;
  top: 50%;
}

<div class="w3-container sound_container w3-mobile">
    <button class="w3-button w3-circle w3-xxlarge sound_button "><i class="fa fa-music ">Button</i></button>
</div>

在小屏幕上固定定位按钮

1 个答案: