html - 小屏幕上的固定位置按钮

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 属性会将它定位在许多小屏幕的 View 之外。

一种解决方案是使用媒体查询将按钮定位在不同尺寸屏幕上的不同位置。下面的代码片段会将按钮定位在小屏幕上 100 像素(顶部和左侧)处。任何宽度超过 900px 的屏幕都会将按钮移动到 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>