CSS

Question

如果我想让一个元素定位在屏幕上的特定位置，我可以使用：

position: absolute;
top: 614px;
left: 215px;

在我的屏幕上，这非常完美，元素就在我想要的位置。但是，如果我使用更大的屏幕，那就完全错了，如果我使用非常小的屏幕，您可能必须滚动才能看到该元素。你怎么能解决这个问题？我试过研究，我认为这是一个很正常的问题，但我没有真正发现任何有用的东西。谢谢！

Answer 1

我猜您想将元素粘贴到 window 的右下边缘？然后分别使用bottom:0和right:0：

div {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div>text</div>

或者，如果你想把它放在中间，应用 50%：

div {
  position: absolute;
  top: 50%;
  left: 50%;
}

<div>text</div>

Answer 2

绝对位置 css 通过相对于 parent 元素放置绝对位置来工作。如果 parent 元素没有退出，它将一直默认为 html 元素。简而言之，这意味着如果您的 parent 发生变化，您的绝对定位也会发生变化。

如果您希望它具有响应性，最好使用百分比。您还可以根据需要使用媒体查询来调整位置。

  .my-absolute-px{
        position: absolute;
        top: 100px;
        left: 100px;
    }
    
    .my-absolute-percent{
        position: absolute;
        top: 50%;
        left: 45%;
    }

  
    
    <div class="my-absolute-px">Some px content</div>
    <div class="my-absolute-percent">Some % content</div>

CSS - 如何获得位置：绝对；以适应不同的屏幕尺寸

CSS - how to get position: absolute; to work well with different screen sizes

screen