相对于窗口的位置元素，与窗口大小无关

Question

无论窗口大小如何，如何将元素定位在窗口的可见区域中的相同相对位置？

例如，应为以下元素：

从页面左侧开始
• 窗口宽度的30％，并且
• 从页面顶部开始的窗口高度的50％。

Answer 1

在大多数情况下，仅使用CSS即可做到这一点。您是否尝试过使用position: fixed？

Answer 2

您可以使用绝对定位和viewport percentage lengths，其中一个vh单位是可见区域高度的1％，一个vw单位是可见区域宽度的1％区域。

  

视口百分比长度定义了相对于视口大小（即文档的可见部分）的值。

     

^{-https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths}

.demo {
  position: absolute;
  top: 50vh;
  left: 30vw;
  background: #AFAFAF;
}

<div class="demo">Hello World!</div>