如何在窗口大小更改時將我的按鈕放置在圖像下並保持固定？

目前你可以看到，中央圖像和下面的按鈕沒有分組在一起，我希望它們是。水平跨越很好，但根據窗口大小，按鈕會垂直重疊在圖像上。無論窗口大小如何，我都希望按鈕位於圖像正下方的固定位置。如何在窗口大小更改時將我的按鈕放置在圖像下並保持固定？

你可以看到我是如何將按鈕放在下面的。任何人都可以看到我要去哪裏嗎？乾杯

下面是相關代碼

html  { 
     height: 100%; 
     width: 100%; 
    } 

    body  { 
     width: 100%; 
     height: 100%; 
    } 

    #mainText { 
     position: fixed; 
     top: 35%; 
     left: 33%; 

    } 

    #yesButton { 
     position: fixed; 
     top: 59%; 
     left: 33%; 
    } 

    .image_off, #home:hover .image_on{ 
     display:none 
    } 
    .image_on, #home:hover .image_off{ 
     display:block 
    }

================= HTML =============== ==

<div id="mainText"> 
    <img src="images/mainText.png" height="160" width="340"> 
</div> 

<div id="yesButton"> 
<a id="home"><img class="image_on" src="images/yesPlease.png" height="60" width="336" alt="" /><img class="image_off" src="css/images/yesPleaseHover.png" height="60" width="336" alt="" /></a> 
</div>

來源

2017-02-12 WreckTangle

我相信你需要'位置：絕對'，而不是'固定' – pol

我試過了，它沒有改變任何東西。效果仍然是一樣的：/ – WreckTangle

波爾是正確的，位置絕對是你在找什麼。

但在這種情況下，您需要更改的不僅僅是CSS。

將你的div mainText包裹在你的yesButton div中，並確保你的yesButton的位置設置爲絕對。

</div> 
<div id="mainText"> 
<img src="images/mainText.png" height="160" width="340"> 
<div id="yesButton"> 
<a id="home"><img class="image_on" src="images/yesPlease.png" height="60" width="336" alt="" /><img class="image_off" src="css/images/yesPleaseHover.png"  height="60" width="336" alt="" /></a> 
</div> 
</div> 
</div>

您還需要重新定位yesButton但我有一個小提琴，它顯示出，你可能想它一個很好的跡象。

https://jsfiddle.net/pjcscc2a/

來源

2017-02-12 01:50:01

@WreckTangle沒問題，祝你在網站上好運！ –

移動「yesButton」 DIV到「mainText.png」和正下方的「maintext.png」圖像標記爲我工作。我也不得不評論分配給「yesButton」的CSS規則

來源

2017-02-12 01:56:53 Tsekwi

如何在窗口大小更改時將我的按鈕放置在圖像下並保持固定？

回答

相關問題