CSS 位置:相对 vs 位置:绝对

发布于 2024-10-19 13:10:06 字数 1436 浏览 2 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

尾戒 2024-10-26 13:10:06

在大多数情况下,您的模式应该是正文的直接子级。

如果模态的祖先具有相对或绝对定位,则除了更改有问题的元素上的样式之外,您无法“撤消”这种操作。

HTML:

<html>
    <head>...</head>
    <body>
        <div id="content">content!</div>
        <div id="someModal" class="modal" style="display:none"></div>
    </body>
</html>

CSS:

.modal {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

In most cases, your modal should be a direct child of the body.

If the modal has an ancestor with relative or absolute positioning, you cannot "undo" that short of changing the style on the offending element.

HTML:

<html>
    <head>...</head>
    <body>
        <div id="content">content!</div>
        <div id="someModal" class="modal" style="display:none"></div>
    </body>
</html>

CSS:

.modal {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
后来的我们 2024-10-26 13:10:06

我们很想先看到您的代码,但您可能正在寻找以下内容:

position: absolute !important;

We would love to see your code first, but probably you're looking nto this:

position: absolute !important;
2024-10-26 13:10:06

那么,设置在 (0,0) 的绝对定位元素将始终到达其最近的相对位置父元素的 (0,0) 角。这是定义的行为,无法更改。

由于您绝对定位模态,因此我建议从相对定位的元素中取出并将其粘贴在(a)非定位父级或(b)主体标签之后。

编辑:乔纳森打败了我!

Well, an absolutely positioned element that is set at (0,0) will ALWAYS got to the (0,0) corner of its closest parent element that is position relative. This is the defined behavior and cannot be altered.

Since you are absolutely positioning the modal, I'd suggest pulling out out of the relatively positioned element and just sticking it under either (a) a non-positioned parent, or (b) just after the body tag.

EDIT: Johnathan beat me to it!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文