ボタンを配置して動きを防止するには？

Question

あなたは私のサイトのこのイメージから見ることができるように：

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

私のボタンが右側にランダムに生成されたテキストの下に詰め込まれています。代わりに、私はそれを下げたいと思います。 さらに、ボタンをクリックするとランダムな画像が生成されますが、その画像は画像のサイズに応じてボタンを垂直方向に移動しているため、ページに完全に「固定」しています。良くない。

代わりに、私はそのボタンを常に同じ位置にとどめたいと思います。

ご意見やご協力をいただければ幸いです。私はまだこれすべてに新しいです。ありがとうございました。

-Wilson実際のウェブサイトへのリンク http://www.wilsonschlamme.com/test4.html

CSS： *それは非常に簡単です。ここの最初の2つの要素は、ページを中心にコントロールしています。残りの部分は自明ですが、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; 
}