这个问题在这里已经有答案了:
固定位置,但相对于容器
(27个答案)
(27个答案)
CSS位置元素“;固定的;滚动容器内部
(7个答案)
(7个答案)
三年前关闭的
我发现当我定位一个固定的元素时,不管父元素是否相对定位,它都会定位固定,相对于窗口
#{
宽度:300px;
背景:橙色;
保证金:0自动;
位置:相对位置;
}
#回馈{
位置:固定;
右:0;
顶部:120px;
}
<;div id=“包装器”>;
...
<;a id=“feedback”href=”“>;反馈</a>;
</部门>
CSS规范要求将position:fixed定位到视口,而不是包含定位元素的视口
如果必须指定相对于父对象的坐标,则必须首先使用JavaScript查找父对象相对于视口的位置,然后相应地设置子(固定)元素的位置
备选方案:某些浏览器具有粘性CSS支持,该支持将元素限制在其容器和视口中。根据提交消息:
粘性。。。约束要定位在其容器框和视口交点内的图元粘性定位的图元的行为类似于位置:相对(空间为
在流中为其保留),但偏移量由
粘性位置。将IsInFlowPosition()更改为覆盖相对和
粘的
根据您的设计目标,此行为在某些情况下可能会有所帮助。它目前是一个工作草案,除了表元素之外,它还有相当好的支持位置:sticky在Safari中仍然需要-webkit前缀
有关浏览器支持的最新统计信息,请参见caniuse