固定在右上角的位置与父 div 相关

Question

我有一个这样的html：

<div class="container">
  <div class="vertical-btns">
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
  </p>
  </br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
  </p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
  </p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
  </p>
</div>

有了这个css：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  background-color: #71E764;
  max-width: 50rem;
  height: 100%;
  overflow: auto;
  max-height: 500px;
  margin: auto;
}
.vertical-btns {
  position: fixed;
  padding-left: 20px;
  width: inherit;
  max-width: inherit;
  flex: auto;
  flex-direction: column;
  display: flex;
  right: 0;
}

结果是我有一个带有 3 个固定按钮但在其外部的容器。我需要的是按钮留在右上角的容器内。但是这样，right: 0，它与父容器无关，但似乎与网页有关。有没有办法解决这个问题？

这就是 codepen，你可以看到按钮完全在页面的右侧，而不是容器：https://codepen.io/eryonn/pen/oNBbOwe

Answer 1

尝试使用position: absolute; 将元素定位在具有position: relative; 的父元素内，然后将position: fixed; 定位在绝对定位内的元素上

Answer 2

使用 .vertical-btns 元素代替 right: 0;

margin-left: min(50rem, 100%);
transform: translateX(-100%);

---

为什么是 margin-left: min(50rem, 100%)？

这是因为您的包装器没有固定宽度，而只是一个max-width。因此，当视口小于50rem 时，它会变得响应，因此margin-left 也必须相应地更低。有关 CSS min() 函数的更多信息，请访问MDN

注意 1：如果您使用 CSS 预处理器，则在编译源代码时可能会引发错误，这可能是因为预处理器已经具有 min() 函数。如果您想使用 CSS 函数来更改字母的大小写（例如 Min(...)），因为 css 函数不区分大小写

注意 2：如果你的浏览器在这种情况下不支持 min() 函数，你可以使用一个 mediaquery 来做同样的事情（只是有点冗长），例如 p>

.vertical-btns { margin-left: 100% }

@media (min-width: 50rem) {
   .vertical-btns { margin-left: 50rem }
}

---

结果

Answer 3

"position:fixed" 将元素从页面的正常流程中移除，并将其相对于视口定位。您可以将“位置：粘性”与“顶部：0”一起使用，这将使您的元素即使在滚动时也会粘在顶部。这是代码示例。

 .vertical-btns {
   position: sticky;
   padding-left: 20px;
   width: 100%;
   flex: auto;
   flex-direction: column;
   display: flex;
   align-items:flex-end;
   top:0;
   height:0;
  }

Answer 4

只需使用position: absoulte 而不是position: fixed，您就可以将按钮相对于容器放置在您想要的任何位置；-)

位置fixed 总是相对于视口。定位àbsouteis allways relative to the notstatic`定位的父元素。

查看示例：

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            position: relative;
            background-color: #71E764;
            max-width: 50rem;
            height: 100%;
            overflow: auto;
            max-height: 500px;
            margin: auto;
        }

        .vertical-btns {
            position: absolute;
            top: 0;
            right: 0;
            padding-left: 20px;
            width: inherit;

        }

<div class="container">
  <div class="vertical-btns">
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
  </p>
  </br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
  </p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
  </p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
  </p>
</div>

---

注意：将代码更新为 cmets。