2017-05-11 126 views
1

如何把下面的另一個我有一個div?我所指的div是由id文本引用的,我希望它在圖片下面。這裏是 HTML和CSS:放置一個div下面的另一個DIV

#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>

+0

刪除'位置:從第一個absolute'。 –

+0

定位正在移動'文字'。如果可以,請刪除。 – wazz

回答

0

您使用絕對定位與#picture格,這意味着它忽略頁面上定位的「自然」順序。爲了讓您的圖像出現在您想要的位置,請調整您的CSS,以免使用絕對位置。例如,您可以將image和#textual div放在另一個div中,用於定位內容。

一定要研究CSS盒模型更好地瞭解如何最佳地定位HTML和CSS元素。

0
在你的CSS

#picture { 
text-align:center; 
} 

的位置是:絕對的;頂部:50%;正在將圖片向下移動。

0

div元件是塊元件和塊元件被設計成堆疊在彼此的頂部上。如果你希望他們堆棧,從#picture在你的CSS刪除position:absolute

https://jsfiddle.net/9fwcgnv3/

0

你只需要添加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>

0

對文本的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>