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

我有这样一个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>

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

---

这是代码笔，正如您所看到的，按钮完全位于页面右侧，而不是容器：

而不是

右侧：0用于元素
。垂直BTN
使用

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


为什么左边距：最小（50rem，100%）？

这是因为您的包装没有固定的宽度，只有一个
max-width
。因此，当视口小于
50rem
时，它会做出响应，因此
左侧的边距必须相应地更低。有关CSS min（）函数的更多信息，请访问

注1：如果使用CSS预处理器，编译源代码时可能会出现错误，可能是因为预处理器已经有了
min（）
函数。如果要使用CSS函数，请更改字母的大小写（例如
Min（…）
），因为CSS函数不区分大小写

注意2：如果您的浏览器在这种情况下不支持min（）函数，您可以使用mediaquery来执行相同的操作（只是稍微详细一点），例如


结果

而不是
右侧：0用于元素
。垂直BTN
使用

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


为什么左边距：最小（50rem，100%）？

这是因为您的包装没有固定的宽度，只有一个
max-width
。因此，当视口小于
50rem
时，它会做出响应，因此
左侧的边距必须相应地更低。有关CSS min（）函数的更多信息，请访问

注1：如果使用CSS预处理器，编译源代码时可能会出现错误，可能是因为预处理器已经有了
min（）
函数。如果要使用CSS函数，请更改字母的大小写（例如
Min（…）
），因为CSS函数不区分大小写

注意2：如果您的浏览器在这种情况下不支持min（）函数，您可以使用mediaquery来执行相同的操作（只是稍微详细一点），例如


结果

尝试使用
位置：绝对
以
位置：相对的方式将元素定位在父元素内然后<代码>位置：固定位于绝对位置内的元素上
尝试使用
位置：绝对
以
位置：相对的方式将元素定位在父元素内然后<代码>位置：固定
 .vertical-btns {
   position: sticky;
   padding-left: 20px;
   width: 100%;
   flex: auto;
   flex-direction: column;
   display: flex;
   align-items:flex-end;
   top:0;
   height:0;
  }

“position:fixed”从页面的正常流中删除元素，并将其相对于视口进行定位。您可以将“position:sticky”与“top: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;
  }

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

位置
固定
始终相对于视口。位置a bsoute
始终相对于非
static`定位的父元素

见示例：


*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
位置：相对位置；
背景色：#71E764；
最大宽度：50雷姆；
身高：100%；
溢出：自动；
最大高度：500px；
保证金：自动；
}
.垂直基站{
位置：绝对位置；
排名：0；
右：0；
左侧填充：20px；
宽度：继承；
}

点击
点击
点击
Lorem ipsum dolor sit amet，是一位杰出的献身者。调味品，调味品，调味品，调味品，调味品。这是一种侵权行为。在一个亨德雷特湖。前庭位于大鼠的前庭。《自然之母》，利奥·维塔伊的遗言，日耳曼的名言。在枕前的抚慰，但名言。阿利奎姆·埃拉特·帕特。这是一本关于智者的书。穆尔斯蒂（Fusce molestie）、马莱苏阿达（interdum malesuada）的维利特（velit）、法雷特拉（purus justo pharetra）和利奥（ac leo）的阿库姆桑（Concertetur accumsan）等。多洛梅特斯的前庭。前庭装饰有一层威严的地毯。梅塞纳·阿利奎特·莱索斯（Maecenas aliquet Dignessim risus），非康格·胡斯托·弗林蒂利亚·马蒂斯（justo fringilla mattis）。梅塞纳和权杖，同侧前庭。在tincidunt justo facilisis vel，佩伦特式临时修女猫。Integer tincidunt，威尼斯会议厅的dolor，turpis nulla pretium erat，nec Pellentsque ante justo vel risus



Lorem ipsum dolor sit amet，是一位杰出的献身者。调味品，调味品，调味品，调味品，调味品。这是一种侵权行为。在一个亨德雷特湖。前庭位于大鼠的前庭。《自然之母》，利奥·维塔伊的遗言，日耳曼的名言。在枕前的抚慰，但名言。阿利奎姆·埃拉特·帕特。这是一本关于智者的书。穆尔斯蒂（Fusce molestie）、马莱苏阿达（interdum malesuada）的维利特（velit）、法雷特拉（purus justo pharetra）和利奥（ac leo）的阿库姆桑（Concertetur accumsan）等。多洛梅特斯的前庭。前庭装饰有一层威严的地毯。梅塞纳·阿利奎特·莱索斯（Maecenas aliquet Dignessim risus），非康格·胡斯托·弗林蒂利亚·马蒂斯（justo fringilla mattis）。文科硕士