Question

我需要将#outer1固定在屏幕顶部，但如果不弄乱当前位置，我就无法做到。我不能只修复#outer1，因为我需要它是相对的，因为内部的div需要绝对定位。我应该怎样做才能将#outer1固定在屏幕顶部？

＆＃13;

div {
  border: 1px solid black;
}
#outer1 {
  height: 100px;
  position: relative;
}
#outer2 {
  height: 900px;
}
#left {
  display: inline-block;
}
#right {
  display: inline-block;
  position: absolute;
  right: 0;
}

＆＃13;

<div id='outer1'>
  <div id='left'>Left</div>
  <div id='right'>Right</div>
</div>

<div id='outer2'></div>

＆＃13;

Answer 1

我不能只修复#outer，因为我需要它是相对的，因为内部的div需要绝对定位。

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

绝对定位元素的规则是它们的包含块是nearest positioned ancestor。位置固定的#outer1是定位的祖先，因此符合条件。只有99％的人使用position: relative，因为这对父母的影响微乎其微。

使用position: fixed作为绝对定位子项的包含块没有问题。

来自MDN：

定位元素是计算位置的元素   属性为relative，absolute，fixed或sticky。 （换句话说，除static之外的任何其他内容）

相对定位元素是计算出来的元素   position属性为relative。

绝对定位元素是计算出来的元素   position属性为absolute或fixed。

粘性定位元素是计算出来的元素   position属性为sticky。

top，right，bottom和left属性指定了   定位元素的位置。

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

<子>源：   https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

您仍然可以在具有fixed位置的div中绝对定位子元素，它不必是特定相对的，它不能是static，{position的默认值1}}

body {
  margin: 0;
  padding: 0;
}
div {
  border: 1px solid black;
}
#outer1 {
  height: 100px;
  position: fixed;
  width: 100%;
}
#outer2 {
  height: 900px;
}
#left {
  display: inline-block;
}
#right {
  display: inline-block;
  position: absolute;
  right: 0;
}

<div id='outer1'>
  <div id='left'>Left</div>
  <div id='right'>Right</div>
</div>
<div id='outer2'></div>

使相对div固定在屏幕顶部

2 个答案: