Html絕對定位

我有div，哪個位置設置爲絕對。另外我還有幾段內容。當我將瀏覽器的右側移動到左側時，段落隨之移動並嘗試調整到窗口的大小。我試圖將它們定位，但它們仍然在移動。我如何設置它內部的div或段落，讓它們保持在同一個位置？請...以下是代碼：Html絕對定位

HTML：

<div id="search_slogan" > <!-- search_slogan Slogan--> 
    <p style="font-size: 26px; "> Free Business Name Search </p> 
    <p style="font-family:gothic; "> Enter any potential business name. 
     We'll let you know if the company name is available for use in your state, </p> 
    <p style="font-family:gothic; "> usually within 1 business day. </p> 
</div> <!-- END search_slogan Slogan-->

CSS：

#search_slogan{ 
    line-height: 15%; 
    position: absolute; 
    top: 150px; 
    left: 200px; 
    font-family:basic_gothic; 
    font-size: 18px; 
}

來源

2014-11-03 Vitalii Maximov

你可以創建一個[小提琴]（http://jsfiddle.net/）？這樣我們就可以更清楚地看到發生了什麼。 ;） – Jerodev 2014-11-03 15:35:40

移動到適合窗口通常是一個理想的狀態。如果你沒有它，那麼你傾向於給與你具有不同窗口大小的任何人看起來錯誤。什麼是實際問題？這聽起來像你需要提供更多的上下文。 – Quentin 2014-11-03 15:36:39

複製並粘貼@Jerodev，它會比你要求的更快。但對於懶惰（如上），它在這裏：http://jsfiddle.net/4440jkwn/ – Albzi 2014-11-03 15:37:02

你的問題可能是你的盒子沒有固定的寬度，所以它填充剩餘的空間。

添加如下的設置寬度，它不會再移動。

#search_slogan{ 
    line-height: 15%; 
    position: absolute; 
    top: 150px; 
    left: 200px; 
    width: 400px; 
    font-family:basic_gothic; 
    font-size: 18px; 
}

還有其他解決方案，如隱藏溢出，但設置寬度是最簡單的。

來源

2014-11-03 15:38:15

是的！謝謝！你是對的，它的寬度！ – 2014-11-03 15:42:43

請選中您選擇的答案旁邊的複選框=） – mikelt21 2014-11-03 15:46:11

問題在於你的line:height屬性，設置爲15％。這會導致信件堆積。我清理了你的HTML並創建了一個JSFIDDLE HERE。

來源

2014-11-03 15:40:37

Html絕對定位

回答

相關問題