小屏幕上的固定定位按鈕

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（左上角）。任何寬度超過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>