使相对div固定在屏幕的顶部 [英] Making a relative div fixed to the top of the screen

问题描述

我需要将＃outer1 固定在屏幕的顶部，但如果不修正当前位置，我无法做到这一点。我不能让＃outer1 固定，因为我需要它是相对的，因为内部的div需要是绝对定位的。我应该怎么做才能让＃outer1 固定在屏幕的顶部？

  div {border：1px solid black;}＃outer1 {height：100px; position：relative;}＃outer2 {height：900px;}＃left {display：inline-block;}＃right {display：inline-block;位置：绝对; right：0;}  

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

解决方案

我不能只让＃外部固定，因为我需要它是相对的，因为内部的div需要绝对定位。

完全定位的元素的规则是：对于绝对定位的元素，最常见的安排是涉及相对定位的父元素，并不意味着这是唯一的方法。他们的包含块是 最近定位的祖先 。 ＃outer1 固定位置是定位祖先，因此它具有资格。只有99％的人使用 position：relative ，因为这对家长的影响很小。

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

从MDN开始：

一个定位元素是一个元素，它的计算位置
属性是相对，绝对，固定或粘性。 （换句话说，除静态以外的任何其他内容）

定位元素是一个元素，其计算的
位置属性为 relative 。

strong>绝对定位元素是元素，其计算的
位置属性为绝对或固定 。

$ b

一个粘滞定位元素是一个元素，其计算的
位置属性为 sticky $ b $ 顶部，右边， bottom 和 left 属性指定定位元素的
位置。

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

_{来源：
https://developer.mozilla.org/en-US/docs/Web/CSS/position}




I need to make #outer1 to be fixed at the top of screen, but I cannot do it without messing up the current positions. I cannot just make #outer1 fixed, as I need it to be relative, because the divs on the insides need to be absolute positioned. What should I do instead to make #outer1 to be fixed at the top of the screen?

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;
}

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

<div id='outer2'></div>

解决方案

I cannot just make #outer fixed, as I need it to be relative, because the divs on the insides need to be absolute positioned.

Simply because the most common arrangement for absolutely positioned children involves a relatively positioned parent, doesn't mean that's the only way.

The rule for absolutely positioned elements is that their containing block is the nearest positioned ancestor. #outer1 with position fixed is a positioned ancestor, so it qualifies. It's just that 99% of the time people use position: relative since that has minimal impact on the parent.

There's no problem using position: fixed as a containing block for absolutely positioned children.

From MDN:

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky. (In other words, anything other than static)

A relatively positioned element is an element whose computed position property is relative.

An absolutely positioned element is an element whose computed position property is absolute or fixed.

A stickily positioned element is an element whose computed position property is sticky.

The top, right, bottom, and left properties specify the position of positioned elements.

The absolutely positioned element is positioned relative to nearest positioned ancestor (non static). If a positioned ancestor doesn't exist, the initial container is used.

_{source: https://developer.mozilla.org/en-US/docs/Web/CSS/position}

这篇关于使相对div固定在屏幕的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！