Question

首先是全部：不，我不是在找房产位置：绝对;

我想要的是创建一个显示一些文本的字段。我想在页面中间准确显示该字段，然后淡出背景，无关紧要，div放在代码中。

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

如何在页面中间放置一个Elemtn ABSOLUTE，无论它在代码中写入的位置都无关紧要？

现在我可以说好了，我会把它放在内容之上。但问题是，在这个字段中显示了一些在内容中生成的信息，所以我必须把它放在内容之后的代码中。

我希望，有人可以帮助我:)。

PS：如果你有其他解决方案可以解决这样的问题......欢迎告诉我！我只想要一个类似警报（）的东西; - 具有我自己风格的盒子。

编辑：一些努力:(基本上已经显示了屏幕截图，但这里有一些代码;只是不想让它混淆）

我将文字保存如下：

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

我将文本显示如下：（echo create_help（$ 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;

Answer 1

试试这个：

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

Answer 2

首先，我建议使用position:fixed;代替position:absolute;，因为警报会在页面内滚动。如果你有一个固定的高度和宽度尝试类似的东西 margin: -150px 0 0 -150px; left: 50%; top: 50%;。此CSS代码将水平和垂直居中您的div（演示 - ＆gt; http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html）。但是如果你使用动态高度，你应该考虑使用jQuery或给它一个固定的顶部位置。

DIV-元素绝对（！）定位

2 个答案: