DIV-Elemt 绝对(！） 定位

DIV-Elemt absolute(!) positioning

本文关键字：定位 绝对 DIV-Elemt      更新时间：2023-09-26

首先为所有人：不，我不是在寻找属性位置：绝对;

我想要创建一个显示一些文本的字段。我想在页面中间准确地显示该字段，然后淡出背景，没关系，div 在代码中的位置。

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

如何将 Elemtn ABSOLUTE 放在页面中间，无论它写在代码中的哪个位置？

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

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

PS：如果您有其他解决方案来解决这样的事情...欢迎告诉我！我只想要像alert（）;-Box这样的东西，具有我自己的风格。

编辑：一些

努力：（基本上已经与屏幕截图一起显示，但这里有一些代码;只是不想让它变得混乱）

我将文本保存如下：

// 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;

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

试试这个：

html, body{
  position: relative;
}
.yourAbsoluteClass{
  position: absolute;
  width: 50%;
  top: 25%;
  left: 50%;
}
相关文章：