Question

这是一个更为复杂的案例的复制品：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <div style="position:absolute;left:500px;top:200px;width:200px;background-color:red;";>
        AS HDSKLAJD KLASJD KLASJ DKLASJDKL JASKLD JKLAS JDKLASD AS HDSLAJD
        <p>
        sadas dasd sad asd sadas dasd sad asdsadas dasd sad asdsadas dasd sad asd
        </p>

        <div style="position:absolute;left:0;top:0;width:10px;background-color:green;";>
            CORNER
        </div>
    </div>
</body>
</html>

我想要的是在页面的0,0处使用CORNER文本的div。我知道我可以简单地将html中的DIV更改为绝对的第一个DIV之外但我不能这样做，因为在实际情况下我仅限于ContentPlaceHolder（ASP.NET）。那么，是否有可能将DIV嵌套在具有绝对位置的其他DIV中并使其坐标绝对位于页面上？

Answer 1

那么，是否有可能将DIV嵌套在具有绝对位置的其他DIV中并使其坐标绝对位于页面？

不是绝对的页面，没有。您可以使用负left和top值将DIV移到容器外部 - 如果容器的left和top坐标是固定的，则可以达到方式 - 但坐标将始终相对于容器，永远不会相对于页面。

修改突破容器（尝试在示例中更改它，position:fixed会将其放入容器中页面的左上角（如果你想要它）但是它具有明显的副作用，即固定在视口上而不是文档中 - 所以只有在正文中没有滚动时它才有用。

Answer 2

也许这不是您需要的通用解决方案，但您可以将外部<div>的绝对定位更改为保证金：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
    <div style="margin-left:500px;margin-top:200px;width:200px;background-color:red;";>
        AS HDSKLAJD KLASJD KLASJ DKLASJDKL JASKLD JKLAS JDKLASD AS HDSLAJD
        <p>
        sadas dasd sad asd sadas dasd sad asdsadas dasd sad asdsadas dasd sad asd
        </p>

        <div style="position:absolute;left:0;top:0;width:10px;background-color:green;";>
            CORNER
        </div>
    </div>
</body>
</html>

当你这样做时，内部<div>将完全定位在<body> - 其最近的祖先与非静态定位。

Answer 3

abs定位的坐标使用定位元素的最近定位父框。因此，假设创建角的div没有父元素为rel或abs，它将默认链为html元素，该元素位于视口的0,0处。这里唯一的问题是根据您的布局可能很难完成。因此，虽然理论上它可能是不可行的。最好在直接父级上使用位置相对，然后使用负值定位。

Answer 4

如果你只限于ContentHolder你不能这样做吗？（我在HTML中使用JavaScript注释......即使它不起作用也会更容易：P）

<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    </div> //close the content div
    <div style="position:absolute;left:0;top:0;width:10px;background-color:green;";>
        CORNER
    </div>
</asp:Content>

编辑：好的，我刚刚意识到，如果内容持有者之后有内容，这将无效。我会离开它，因为它解决问题的可能性很小（可能是非常小的机会）

CSS嵌套Div与位置绝对？

4 个答案: