CSS定位未按预期工作。

Question

CSS定位未按预期工作。

3

这是我的代码

CSS

       h2
        {
            position: absolute;
            left: 100px;
            top: 150px;
        }
        h1
        {
            position: fixed;
            top: 300px;
        }

HTML

    <h1>
        Heading for Fixed Position
    <h2>
        This is a heading with an absolute position</h2>
    </h1>

我刚开始学习CSS，正在尝试定位的功能。我在某处读到：

绝对定位元素的位置是相对于第一个具有非 static 定位属性的父元素来确定的。如果没有这样的元素，则相对于包含块即 <html> 元素进行定位：

如果这是正确的，那么 This is a heading with an absolute position 消息必须在 Heading for Fixed Position 下面，因为 h1 是父对象，h2 作为绝对对象必须相对于 h1 进行定位。如果我错了，请纠正我。

这是 JSFiddle 链接： http://jsfiddle.net/KXmgG/

- iJade

"因为h1是父级对象"，但它并不是一个父级对象，因为它在没有任何标签的情况下被关闭了。 - Nitesh

好的，我刚刚将h1设置为父对象。更新后的代码请看一下。 - iJade

这里的父块是HTML body，因此输出。尝试嵌套<h1> <h2>标签！ - Vedant Terkar

@VedantTerkar 我已经做了那个。h2嵌套在h1内部。 - iJade

2个回答

0

"

绝对定位元素相对于第一个具有非静态定位的父元素进行定位。如果找不到这样的元素，则使用包含块：

是的，但您没有声明position:relative。

如果您想要您的父级转换您的HTML，请使用以下代码：

"

<div class="parent">
    <h1 class="child">blabla</h1>
    <h2 class="child">blabla</h2>
</div> <!-- end parent -->

<div class="relative">
    <h1>
        Heading for Fixed Position</h1>
    <h2>
        This is a heading with an absolute position</h2>
</div>

CSS：

.relative{
    position:relative;
    }

JSFIDDLE 与之相关

position relative / fixed / absolute /]

http://jsfiddle.net/KXmgG/1/

- artSx

"绝对定位元素相对于第一个具有非静态定位的父元素进行定位，我已经修复声明。" - iJade

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

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

- Mr. Alien · Accepted Answer

我想向您解释定位是如何实现的，它有四种类型：

静态（默认）
相对定位
绝对定位
固定定位

静态定位只是文档正常流程中元素的呈现方式（不包括浮动元素）。

相对定位是一种特殊的定位方式，在与绝对定位一起使用时具有强大的作用。当您想要使用上、左、下和右而不是边距时，需要将position: relative;分配给该元素。这样做后，上、左、右和下属性将起作用。

当您使用position: absolute;时，它会脱离文档流程。因此，如果您有一个名为a的类别元素，则将position: absolute;分配给类别a，它将脱离文档流程。因此，当您使用top: 0;时，它将飞到文档的顶部。因此，为了限制它，我们使用position: relative;包装容器，以便当您使用position: absolute;时，它将绝对于特定元素而不是整个文档。 演示1 演示2 固定定位完全不同，它也脱离文档流程，与position: absolute;相同，但区别在于固定定位元素不能与任何元素相关联，它与任何元素都没有联系，始终从窗口的上、左、右和下计算，而不是元素。此外，固定定位元素会随着用户滚动文档而移动。演示

回到您的问题，您使用了固定定位和绝对定位，两者都脱离文档流程，因此它们没有任何关系...

您使用top: 300px;为固定定位，top:: 150px;为绝对定位元素，因此固定元素将呈现在绝对元素下方，但当您尝试滚动时，固定元素将随之滚动，而position: absolute;元素则不会。

按照您的评论进行编辑。

转到w3c验证器并验证您的文档here enter image description here