CSS:相对于父级的固定位置



我有一个Wordpress模板,在整个结构的某个地方嵌套了一个特定的div。它有这样的风格:

#fdm-ordering-sidescreen-tab {
position: fixed;
top: 25vh;
right: 0;
width: 64px;
height: 64px;
background: #fff;
color: #444;
border: 1px solid #ddd;
z-index: 101;
padding: 14px 12px 10px 12px;
cursor: pointer;
box-sizing: border-box;
}

我一直认为position: fixed; right: 0对于整个视口应该是绝对的,即在浏览器的右侧,直接在滚动条旁边。但事实并非如此。它似乎是相对于它的父类,即right: 0相对于其他一些以中心为中心的div

在不更改HTML结构的情况下,我可以将其移动到视口的右侧吗?如果可能,还可以使其与滚动的视口一起滚动吗?

感谢

这是由于包含的div:<div class="fusion-text fusion-text-2" ....具有transform: translate3d(0,0,0);

固定的div现在连接到转换后的元素。它将变换后的元素视为视口。

wordpress是否允许您将其移出包含的div?

查看这个SO帖子关于这个主题的答案

这个:W3C规范

最新更新