CSS嵌套的绝对定位Div？

Question

CSS嵌套的绝对定位Div？

4

以下是一个更为复杂的案例：

<!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>

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

- Patrick Desjardins

既然您已经知道“AS HDSKLAJD KLASJD KLASJ DKLASJDKL JASKLD JKLAS JDKLASD AS HDSLAJD” <div> 元素的位置，那么您为什么不使用绝对定位来进行补偿呢？position:absolute;left:-500px;top:-200px; - Richard JP Le Guen

您能否将"AS HDSKLAJD KLASJD KLASJ DKLASJDKL JASKLD JKLAS JDKLASD AS HDSLAJD" <div>的绝对定位替换为margin/padding呢？ - Richard JP Le Guen

你会发现许多对这个话题感兴趣的人在Doctype网站上（http://doctype.com/）。 - stack

4个回答

1

也许这不是你需要的通用解决方案，但你可以通过改变外部 <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>中绝对定位 - 它是具有非静态定位的最近祖先。

- Richard JP Le Guen

0

如果你只能使用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>

编辑：好的，我刚意识到如果占位符后面还有内容，这种方法就行不通了。我还是保留它，因为可能有一点点机会解决问题（可能性非常小）

- Bob

0

绝对定位的坐标使用最近的已定位父元素框作为定位元素。因此，假设创建角落的 div 没有相对或绝对定位的父元素，它将默认向上链到视口的 0,0 处的 html 元素。唯一的问题是，这可能难以实现，具体取决于您的布局。因此，虽然从理论上讲可能，但实际上并不可行。最好在直接父级上使用相对定位，然后使用负值进行定位。

- prodigitalson

@prodigitalson 嗯，这就是我所说的，不是吗？如果你在一个绝对或相对定位的盒子中，一个子元素就不能“突破”并将自己相对于祖父母定位。我很失望，伙计，我一直在等待一种神奇的技巧 :) - Pekka

哦，是的，那是我的错...我没有注意到他在父级上有 abs。我真丢脸 :-) - prodigitalson

为了参考而留下这个 :-) - prodigitalson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pekka · Accepted Answer

所以，一个 DIV 嵌套在另一个使用 position:absolute 定位的 DIV 内，是否可能将其坐标绝对定位到页面上？

不是相对于页面的绝对定位。你可以使用负数的 left 和 top 值将 DIV 移动到容器外面 - 如果容器的 left 和 top 坐标是固定的，你可以通过这种方式实现效果 - 但是这些坐标始终是相对于容器而不是页面的。

编辑：有一个 position:fixed 可以使其脱离容器（尝试在你的示例中更改它，left: 0px top: 0px 将把它放在页面左上角，就像你想要的一样），但它有明显的副作用，即在视口上固定，而不是在文档内 - 因此仅在正文没有滚动时才有用。