DIV-Elemt絕對（！）定位

首先爲所有：不，我不尋找屬性位置：絕對;DIV-Elemt絕對（！）定位

我想要創建一個顯示一些文本的字段。我想在頁面中間正好顯示該字段，然後淡出背景，無關緊要，div放在代碼中。

目前，它看起來像： https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG

我如何下Elemtn絕對在頁面的中間，不事關它是寫在代碼嗎？

現在我可以說，我會把它放在內容的頂部。但問題是，在這個字段中顯示了一些在內容中產生的信息，所以我必須把它放在內容後面的代碼中。

我希望有人能幫助我:)

PS：如果你有另一種解決方案來解決這樣的事情...感覺歡迎告訴我！我只是想要一個像alert（）; - 我自己的風格框。

編輯：一些努力：（基本上已經與截屏顯示，但這裏的一些代碼，只是沒有想使它混亂）

我保存文本如下：

// Save Help-Text 
ob_start(); 
?> 
This is the main page. There is no help available! 
<?php 
$help = ob_get_clean();

我展示正文如下：（回聲create_help（$幫助）;創建了幫助標籤，並將其顯示）

function create_help($content){ 
$help = " 
<div id=\"help-bg\" class=\"closehelp\" ></div> 
<div id=\"help\" > 
    <img src=\"../images/close.png\" class=\"closehelp\" /> 
    $content 
</div> 
"; 
return $help; 
}

這是盒子的CSS：

/* Help-box style */ 
#help 
display: none; 
position: absolute; 
margin-left: auto; 
margin-right: auto; 
background-color: #B8DBFF; 
border: 5px solid rgb(58, 100, 250); 
border-top: 30px solid rgb(58, 100, 250); 
border-radius: 5px; 
padding: 20px; 
width: 600px; 
z-index: 1001; 
#help img 
position: absolute; 
margin-left: 595px; 
margin-top: -47px; 
height: 25px; 
width: 25px; 
/* Makes background of Help-box transparent black */ 

#help-bg 
background-color: black; 
z-index: 1000; 
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
opacity:0.6; 
display: none;

來源

2013-12-18 TheElbenreich

首先向我們展示一些努力。你的代碼在哪裏嘗試？ – melancia

你*正在尋找屬性'位置：絕對'，你也希望確保元素的父母都沒有屬性'position：relative'或者想要確保那個元素只是直接的孩子身體。 –

當輪子是您的問題的完美解決方案時，您試圖重新發明輪子。把你的警示框代碼放在身體的直接孩子身上，並使用絕對定位。任何其他解決方案都是徒勞無益的。 –

首先，我會建議使用position:fixed;代替position:absolute;因爲警報會在頁面中滾動。如果您有固定的高度和寬度，請嘗試如 margin: -150px 0 0 -150px; left: 50%; top: 50%;。這個CSS代碼將水平和垂直居中你的div（Demo - >http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html）。但是如果你使用動態高度，你可能應該考慮使用jQuery或者給它一個固定的頂部位置。

來源

2013-12-18 16:54:51 Stoeffn

我認爲你交換了一些......與立場：絕對;它保持在同一地點。如果我在幫助框中有很多東西，以便它比屏幕更大，我想向下滾動以查看底部部分...無論如何：Thans爲您的帖子！ – TheElbenreich

嗯...它不應該留在同一個地方（對我來說是恥辱），因爲上次我創建了一個彈出窗口，這個代碼工作得很好。但我真的認爲一個固定的位置更好：您可以給你的彈出式內容一個最大高度和overflow-y：auto。所以當你的內容太大時，你可以滾動內容而不是滾動整個頁面。但這只是我的看法（和我上次做的）。我希望你正在開發的項目會成功！並感謝您回答並糾正我！ – Stoeffn

我也已經想過溢出屬性，但我試過了，但它沒有工作，因爲我想...所以我只是「固定」它與使用位置：絕對，然後你只需向下滾動，而無需滾動條。因此，「背景」（淡出的主要頁面）也滾動...但這不成問題... – TheElbenreich

試試這個：

所有的

html, body{ 
    position: relative; 
} 
.yourAbsoluteClass{ 
    position: absolute; 
    width: 50%; 
    top: 25%; 
    left: 50%; 
}

來源

2013-12-18 16:52:11 HICURIN

非常感謝！我不知道爲什麼我沒有對此做薄...它工作:)謝謝。 – TheElbenreich

不客氣！：D – HICURIN

DIV-Elemt絕對（！）定位

回答

相關問題