定位按钮并防止移动？

Question

正如您从我网站的这张图片中看到的那样：

https://www.flickr.com/photos/77598212@N03/33735427334/in/dateposted-public/

我的按钮挤在随机生成的文本下方。相反，我想降低它。但另外，我试图将它完全 "anchored" 保留在页面上，因为现在当我单击按钮时，会生成一个随机图像，但该图像会根据图像的大小垂直移动按钮。不好。

相反，我希望该按钮始终保持在同一位置。

任何thoughts/help将不胜感激。我对这一切还很陌生。谢谢你。 -威尔逊

link到实际网站http://www.wilsonschlamme.com/test4.html

css: *这很简单。这里的前两个元素控制页面居中。其余的不言自明，showtext 指的是随机文本生成器。

*{
margin:0;
padding:0;

}

body{
text-align:center; /*For IE6 Shenanigans*/
}

button {
color: #900;
font-weight: bold;
font-size: 150%;
  text-transform: uppercase;

}

h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;



}

img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}

#ShowText{

overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}

Answer 1

使用：

#buttonfun {
  margin-top: 20px;
}

用 div 包裹 img：

<div class="image-wrapper">
   <img src="images/297.jpg" />
</div>

并添加 CSS:

.image-wrapper {
  height: 440px;
}

定位按钮并防止移动？

Positioning a button and preventing movement?

css

button

positioning