css 如何计算元素在响应父容器中的位置？

zd287kbt 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(109)

我有一个div容器，当我开始最小化页面时，它具有响应的宽度和高度。它还具有最小宽度。我想添加一个浮动的动作按钮，是24px从底部和24px从右边的div容器。我尝试使容器的位置相对，而按钮的位置固定，但按钮仍然相对于视口。
我想做的事情在固定位置的情况下可能实现吗？
有没有其他方法来做到这一点，或者可能重新计算按钮的位置的基础上容器的宽度？

<div class="container">
<button class="button" type="button">
    I want to be relative to my container and not the viewport
</button>
</div>

.container {
    position: relative;
    min-height:500px;
    min-width: 1500px;
}

.button {
    position: fixed;
    bottom: 24px;
   right: 24px;
}

css

来源：https://stackoverflow.com/questions/76519416/how-can-i-calculate-the-position-of-an-element-within-a-responsive-parent-contai

2条答案

按热度按时间

klh5stk11#

为什么按钮上没有position: absolute？

.container {
  position: relative;
  min-height: 130px;
  border: 1px solid tomato;
}

.button {
  position: absolute;
  bottom: 24px;
  right: 24px;
}

<div class="container">
  <button class="button" type="button">
    I want to be relative to my container and not the viewport
</button>
</div>

赞(0）回复(0）举报 2023-06-25

zpqajqem2#

为了获得所需的效果，应该使用position: absolute而不是position: fixed。
MDN position CSS属性
绝对定位的元素相对于它的 * 最近定位的祖先 * 定位（即，最近的祖先不是static）。固定定位与绝对定位类似，只是元素的包含块是 viewport 建立的初始包含块[即body ]

.container {
  position: relative;
  min-height: 500px;
  min-width: 1500px;
}

.button {
  position: absolute;
  bottom: 24px;
  right: 24px;
}

<div class="container">
  <button class="button" type="button">
    I want to be relative to my container and not the viewport
  </button>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何计算元素在响应父容器中的位置？

2条答案

相关问题

热门标签

最新问答