CSS 嵌套 Div 具有绝对位置?

2024-03-11

这是一个更为复杂的案例的再现:

<!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 中,并且使其坐标相对于页面是绝对的?


那么,是否可以将一个 DIV 嵌套在另一个具有绝对位置的 DIV 中,并且使其坐标相对于页面是绝对的?

对于页面来说不是绝对的,不是。您可以使用负数left and top将 DIV 移出容器的值 - 如果left and top容器的坐标是固定的,您可以通过这种方式实现效果 - 但坐标将始终相对于容器,而不是相对于页面。

Edit:position:fixed that does打破容器(尝试在您的示例中更改它,left: 0px top: 0px会将其放置在页面的左上角,如您所愿),但它具有固定在视口上而不是文档中的明显副作用 - 因此仅当正文中没有发生滚动时它才有用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 嵌套 Div 具有绝对位置? 的相关文章