divを別のdivの下に置く

Question

divを別のdivの下に配置するにはどうすればよいですか？私が参照しているdivはidのテキストで参照されており、その下の画像にしたいと考えています。あなたのCSSの

#picture { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 30%; 
 
} 
 

 
html { 
 
    background-color: teal; 
 
} 
 

 
#textual { 
 
    margin-top: 50px; 
 
} 
 

 
p { 
 
    font-size: 30px; 
 
}

<h1 class="text-center">Sir Isaac Newton</h1> 
 
<div class="container-fluid" id="main"> 
 
    <div id="picture"> 
 
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img> 
 
    </div> 
 
    <div id="textual" style="text-align: center"> 
 
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist. 
 
    </div> 
 
</div>

Answer 1

あなたはそれがページ上の位置付けの「自然」の順序を無視することを意味し、あなたの#picture divの、との絶対位置を使用しています。あなたは絶対位置を使用していないようにあなたがそれを配置したい場所を表示するあなたのイメージためには、あなたのCSSを調整します。たとえば、イメージと#textual divの両方を、コンテンツの内部配置に使用する別のdiv内に配置することができます。

は最適なHTMLとCSSで要素を配置する方法についての理解を得るために、CSSボックスモデルを研究してください。

Answer 2

：

#picture { 
text-align:center; 
} 

位置：ここ HTMLとCSSは絶対。トップ：50％;画像を下に移動しています。

Answer 3

div要素は、ブロック要素とブロック要素が互いの上にスタックするように設計されています。それらをスタックしたい場合は、CSSの#pictureからposition:absoluteを削除してください。

https://jsfiddle.net/9fwcgnv3/

Answer 4

は、あなただけのposition: relativeを追加する必要があり、それが正常に動作する必要があります。 http://jsfiddle.net/XELRX/136/

#picture { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 30%; 
 
} 
 

 
html { 
 
    background-color: teal; 
 
} 
 

 
#textual { 
 
    margin-top: 50px; 
 
} 
 

 
p { 
 
    font-size: 30px; 
 
}

<h1 class="text-center">Sir Isaac Newton</h1> 
 
<div class="container-fluid" id="main"> 
 
    <div id="picture"> 
 
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img> 
 
    </div> 
 
    <br> 
 
    <div id="textual" style="text-align: center"> 
 
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist. 
 
    </div> 
 
</div>

Answer 5

テキストのdivのための使用の相対的な位置と、このように、画像のdivにそれを削除します。

<style> 
#picture { 
    position: absolute; 
    top: 50%; 
    left: 30%; 
} 

html { 
    background-color: teal; 
} 

#textual { 
    position: relative; 
    top: 50px; 
    left: 0; 
} 

p { 
    font-size: 30px; 
} 

</style> 


<h1 class="text-center">Sir Isaac Newton</h1> 
<div class="container-fluid" id="main"> 
    <div id="picture"> 
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img> 
    <div id="textual" style="text-align: center"> 
    <p>Sir Isaac Newton was a brilliant mathematician, astronomer, and physicist. 
    </div> 
    </div> 

</div>