ボタンがdivと重なっているのはなぜですか？

Question

私は、コンテンツdivとボタンを持つメインラッパーdivを持っています。ボタンはコンテンツdivの下にあるはずですが、何らかの理由でボタンが重なっています。

コンテンツのdiv要素はCSSがあります

#groupMembers { 
    position: absolute; 
    height: 50%; 
    width: 90%; 
    left: 5%; 
    overflow: scroll; 
    display: inline-block; 
} 

を、ボタンがあります。

button { 
    display: inline-block; 
    width: 70%; 
    left: 15%; 
} 

私は彼らが重複していないでしょう、両方のインラインブロックしているので思ったが、何らかの理由彼らです。私は表示するためにJsFiddleを作った：http://jsfiddle.net/b5hp6boz/

誰も私がコンテンツのdivの下に表示するボタンを手伝ってもらえますか？

Answer 1

が絶対位置の（大規模な）の使用を削除する....必要に応じてposition: relative;に変更します。しかし、多くの要素でさえ、それは必要ではありません。

ボタンのdivを、HTML内の<h4>add members</h4>の下に移動して、希望する場所に移動します。

次に、#DIV_05の余白とボタンを調整します。

Fiddle UpdateまたはFiddle Update 2

_{はとても広く、あなたがを強制た絶対位置を使用することにより}

（私は単に、そこから調整し、あなたのCSSにrelativeにabsoluteを変更するには、検索を実行します。注意してください）要素を不自然な位置に変換します。その後、それがうまくいかないときは、なぜあなたは疑問に思っています。彼らが自然に落ちたがっている場所に落ちるHTMLを全体的なレンダー順に変更します。絶対的な配置を強制しないでください。

絶対位置の使用は、Z-インデックスを調整し、要素が他の要素の位置を変更しないようにするために最も一般的に使用されます。 （一種のグローバルフロートのように）すべてのレイアウトではのポジショニングのフォールバックであってはなりません。

Answer 2

divタグのZ値を高く設定してください。内の任意のスペースを取得していないことにより、HTML要素に、それは通常のレンダリングプロセスから削除された絶対位置を与えることで

position: absolute; 

：

Answer 3

あなたのコード内の問題は、あなたが#DIV_5以下のCSSを与えているということです資料。つまり、次のBUTTON_105要素の位置には影響しません。そのため、ボタンはH4_4要素（絶対位置を持たない最初の要素）のすぐ下に配置されます。

#DIV_5のposition: absolute;宣言を削除するだけで解決します。 （ところで：それは更なる問題を引き起こす可能性としてあなたは絶対位置を頻繁に使用をしないように試してみてください。）