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绝对（！）定位

回答

相关问题