相对于窗口定位元素，而不考虑窗口大小

Question

如何才能将元素定位在窗口可视区域中的相同相对位置，而不管窗口大小如何？

例如，一个元素应该是：

• 页面左侧窗口宽度的 30%，以及
• 距页面顶部窗口高度的 50%。

Answer 1

在大多数情况下，只能使用 CSS 来做到这一点。你试过使用position: fixed吗？

Answer 2

可以使用绝对定位和视口百分比长度，其中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>