我可以定位相对于父元素固定的元素吗?[副本]

这个问题在这里已经有答案了
固定位置,但相对于容器

(27个答案)
CSS位置元素“;固定的;滚动容器内部

(7个答案)

三年前关闭的

我发现当我定位一个固定的元素时,不管父元素是否相对定位,它都会定位固定,相对于窗口

#{
宽度:300px;
背景:橙色;
保证金:0自动;
位置:相对位置;
}
#回馈{
位置:固定;
右:0;
顶部:120px;
}
<div id=“包装器”>
...
<a id=“feedback”href=”“>反馈&lt/a>
&lt/部门&gt

CSS规范要求将position:fixed定位到视口,而不是包含定位元素的视口

如果必须指定相对于父对象的坐标,则必须首先使用JavaScript查找父对象相对于视口的位置,然后相应地设置子(固定)元素的位置

备选方案:某些浏览器具有粘性CSS支持,该支持将元素限制在其容器和视口中。根据提交消息:

粘性。。。约束要定位在其容器框和视口交点内的图元

粘性定位的图元的行为类似于位置:相对(空间为
在流中为其保留),但偏移量由
粘性位置。将IsInFlowPosition()更改为覆盖相对和
粘的

根据您的设计目标,此行为在某些情况下可能会有所帮助。它目前是一个工作草案,除了表元素之外,它还有相当好的支持位置:sticky在Safari中仍然需要-webkit前缀

有关浏览器支持的最新统计信息,请参见caniuse

发表评论