Html 制作固定在屏幕顶部的相对div

我需要将

#outer1

固定在屏幕顶部，但如果不弄乱当前位置，我无法做到这一点。我不能仅仅将

#outer1

固定，因为我需要它是相对的，因为内部的div需要绝对定位。我应该怎么做才能使

#outer1

固定在屏幕顶部

div{
边框：1px纯黑；
}
#外层1{
高度：100px；
位置：相对位置；
}
#外层2{
高度：900px；
}
#左{
显示：内联块；
}
#对{
显示：内联块；
位置：绝对位置；
右：0；
}

左边
赖特

我不能只是将

#outer

固定，因为我需要它是相对的，因为内部的div需要绝对定位

仅仅因为绝对定位的孩子最常见的安排是相对定位的父母，并不意味着这是唯一的方式

绝对定位元素的规则是，它们的包含块是相同的

#outer1

位置固定的是定位的祖先，因此它符合条件。只是99%的时间人们使用

position:relative

，因为这对父母的影响最小

使用

position:fixed

作为绝对定位子对象的包含块没有问题

来自MDN：

定位元素是其计算位置的元素 属性可以是

相对的

，

绝对的

，

固定的

或

粘性的

。（换句话说，除了静态的

之外的任何内容）

相对定位元素是一个
位置属性是相对的

绝对定位元素是指其
位置属性为
绝对
或
固定

粘性定位元素是一个计算
位置属性是粘性的

顶部

、

右侧

、

底部

和

左侧

属性指定 定位元素的位置

绝对定位的图元相对于最近的图元进行定位 定位祖先（非静态）。如果定位的祖先没有 如果存在，则使用初始容器

资料来源：

---

您仍然可以在div中使用

固定的
位置绝对定位子元素，它不必是特定的相对元素，只是不能是
静态的
，
位置的默认值


正文{
保证金：0；
填充：0；
}
div{
边框：1px纯黑；
}
#外层1{
高度：100px；
位置：固定；
宽度：100%；
}
#外层2{
高度：900px；
}
#左{
显示：内联块；
}
#对{
显示：内联块；
位置：绝对位置；
右：0；
}

左边
赖特
你就不能用
float:right#右侧
div上选择code>，然后确定
#outer1
的位置。任何人都很难根据给出的一些非常简单的布局信息提出建议，而且没有视觉演示。而且…绝对元素的问题没有真正意义。为什么它们绝对重要？@Fred ii-你说得对。有个打字错误。本来应该在外面。我的手指刚好碰到了数字1。我的错。那么，你是说，不要用相对来表示#outer1，而要用固定来表示？你可以使用
position:fixed
，子元素将固定父元素视为它们的包含块（就像
position:relative
）。看看这把最新的小提琴；你看到右下角了吗？看到从边界到右下角的那条线了吗？为什么会这样？我在隐姓埋名中使用谷歌浏览器。我在小提琴上看到了。另外，为什么我们必须将transform添加到#right，它做了什么？它只是告诉
#right
将其一半宽度移回容器中。但这对这个问题并不重要。真正重要的是
#outer1
是
固定的
，并且
左
和
右
都包含在其中。如果您删除
已修复
，您将看到孩子们离开
#outer1
。