このボタンdivが画像divの下に移動しないのはなぜですか？

Question

I want to move the view more button below the place holders

HTML：

<section name="middle" id="middle"> 

     <p>Upcoming Events</p> 

     <div class="grid"> 
      <img src="http://placehold.it/350x300" alt="" /> 
      <img src="http://placehold.it/350x300" alt="" /> 
      <img src="http://placehold.it/350x300" alt="" /> 
     </div> 

     <a href="#"> 
      <div class="button-2">View More</div> 
     </a> 
    </section> 

CSS：

.button-2 { 
text-align: center; 
top: 0; 
margin: 0 auto; 
width: 200px; 
height: 30px; 
border-style: solid; 
border-width: 2px; 
border-color: #1999f9; 
color: #1999f9; 
padding-top: 10px; 
    transition: background-color 0.5s ease; 
} 


    .grid { 
    position: absolute; 
    top: 150px; 
    height: 50px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    /* Align center inline elements */ 
} 

.grid img { 
    vertical-align: middle; 
    display: inline-block; 
    padding-left: 10px; 
} 

がどのように私は、プレースホルダの下に表示より多くのボタンを移動するのですか？ これは私のプレースホルダーのCSSです。この問題を解決する方法はありますか？

Answer 1

top: 0; left:0を使用するには、そのCSSクラスにposition :absoluteを追加する必要があります。あなたがボタンの上に表示するグリッドをしたい場合は...