Question

目前你可以看到中央图像和下面的按钮没有被组合在一起，我希望它们是。水平横跨它，但按钮垂直重叠在图像上，具体取决于窗口大小。无论窗口大小如何，我都希望按钮位于图像正下方的固定位置。

您可以看到我如何将按钮放在下方。任何人都可以看到我错在哪里？干杯

以下是相关代码

    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>

Answer 1

Pol是正确的，绝对位置是您正在寻找的。

但在这种情况下，您需要更改的不仅仅是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/

Answer 2

移动＆＃34; yesButton＆＃34; DIV进入＆＃34; mainText.png＆＃34;并直接位于＆＃34; maintext.png＆＃34;图片标签为我工作。我还必须注释掉分配给＆＃34; yesButton＆＃34;

的CSS规则

如何在窗口大小发生变化时将按钮放在图像下并使其保持固定状态？

2 个答案: