Question

我有一个完整的图像，我已静态放置在我的网站上，但我希望通过透明按钮可以点击这些部分。我已经创建了按钮，但是如果我有不同大小的窗口等，我希望它保持在原位。

有什么想法吗？

HTML：

<img id="container" src="recentProjectsV2.jpg" />

<a href="http://gcseanswers.co.uk/" button id="invisibleButton1"> GCSE Answers </a>

CSS：

invisibleButton1 {

    position: relative;
    width: 290px;
    height: 100px;
    left: 45px;
    top: -170px;

    background-color: transparent;
    border: 10px, orange;
    font-size: 0;
    cursor: pointer;
}

Answer 1

如果希望按钮在调整大小时保持在完全相同的位置，则需要将按钮的位置从相对位置更改为绝对位置。如果你希望它保持在完全相同的位置，例如垂直和水平的死中心，无论窗口大小如何，我建议使用flexbox，但这只适用于IE 10及更高版本。

.invisibleButton1 {
    position: absolute;
    width: 290px;
    height: 100px;
    left: 45px;
    top: -170px;
    background-color: transparent;
    border: 10px, orange;
    font-size: 0;
    cursor: pointer;
}

Answer 2

按钮确实保持在你告诉它留在的位置。

代码：

CSS：

<style>
.invisibleButton1 {

position: relative;
width: 290px;
height: 100px;
left: 45px;
top: -170px;
background-color: transparent;
border: 10px, orange;
font-size: 0;
cursor: pointer;

}
</style>

HTML：

 <body>
<img id="container" src="logo.jpg" />
<a href="http://gcseanswers.co.uk/"> <button id="invisibleButton1"> GCSE   Answers </button> </a>
</body>

如果这不是您要找的内容，请澄清您的问题并添加您的代码。

调整页面大小时停止按钮移动

2 个答案: