Question

我有一个 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 结构的情况下将其移动到视口的最右侧，如果可能，还可以让它随滚动的视口一起滚动吗？

谢谢

Answer 1

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

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

wordpress 会让你把它移出包含的 div 吗？

查看此 SO 帖子 answer on this topic

还有这个：W3C Spec

CSS：相对于父级的固定位置？

1 个答案: