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 新手，所以正在尝试定位。我读了一些地方

绝对位置元素相对于第一个具有非静态位置的父元素定位。如果没有找到这样的元素，则包含块是<html>：

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

这是 JSFiddle 链接：

http://jsfiddle.net/KXmgG/

4

2 回答 2

3

我想向您解释定位实际上是如何工作的，有 4 种类型

  • 静态（默认）
  • 相对的
  • 绝对
  • 固定的

静态位置只不过是文档的正常流程，其中元素一个接一个地呈现（不包括浮动）

相对位置是一种特殊的东西，当与绝对位置一起使用时，它被证明是一种强大的力量。当您想使用顶部、左侧、底部和右侧而不是边距时，您需要分配position: relative;给该元素，这样做之后，顶部、左侧、右侧和底部属性将起作用。

当你使用position: absolute;它时，它会脱离文档流，所以如果你有一个名为divwidth class的元素a。现在，如果您分配position: absolute;给 class a，它将脱离文档流，因此当您使用top: 0;它时，它会飞到文档的顶部。所以为了限制它，我们用 包装了一个容器， position: relative;这样当你使用 时position: absolute;，它对那个特定元素是绝对的，而不是整个文档。

演示 1

演示 2

位置固定是完全不同的，它也一样在文档流之外，position: absolute;但不同的是固定位置的元素不能相对于任何元素，它与任何元素没有任何接触，它总是从顶部，左侧计算，窗口的右侧和底部而不是元素，当用户滚动文档时，固定位置的元素也会流动。

演示

得出你的答案，你正在使用固定位置和绝对位置，两者都超出了文档流，所以它们没有任何关系......

您正在使用top: 300px;固定位置和top:: 150px;绝对定位元素，因此固定元素将呈现在绝对元素下方，但是当您尝试滚动时，您的固定元素将沿着元素不会滚动的地方滚动position: absolute;。

按照您的评论进行编辑

转到 w3c Validator 并在此处验证您的文档

在此处输入图像描述

于 2013-06-28T10:21:34.620 回答
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/

于 2013-06-28T10:16:27.970 回答