我需要将#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;
position: absolute;
right: 0;
}
<div id='outer1'>
<div id='left'>Left</div>
<div id='right'>Right</div>
</div>
<div id='outer2'></div>
我不能只
#outer
固定它,因为我需要它是相对的,因为内部的div需要绝对定位。
仅仅因为绝对定位的孩子最常见的安排涉及相对定位的父母,并不意味着这是唯一的方法。
绝对定位元素的规则是它们的包含块是最接近定位的祖先。#outer1
位置固定的是定位的祖先,因此符合条件。人们仅用了99%的时间,position: relative
因为这对父母的影响很小。
position: fixed
绝对定位的孩子用作容纳块没有问题。
从MDN:
甲定位元件是一个元件,其计算的位置属性是
relative
,absolute
,fixed
或sticky
。(换句话说,不是static
)甲相对定位元件是一个元件,其计算的位置属性是
relative
。一个绝对定位的元素是一种元素,其计算的位置属性是
absolute
或fixed
。甲粘粘定位元件是一个元件,其计算的位置属性是
sticky
。的
top
,right
,bottom
,和left
属性指定定位元素的位置。绝对定位的元素相对于最近定位的祖先(非静态)定位。如果不存在已定位的祖先,则使用初始容器。
来源:https : //developer.mozilla.org/en-US/docs/Web/CSS/position
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句