HTML:如何相对于屏幕大小放置对象

Question

如何将对象放在HTML中整个屏幕的百分比中，而不仅仅是放在前一个对象旁边？例如，<div>位于屏幕宽度50%、屏幕高度30%的位置。

对此有一些要求：

• 无论其他对象如何，对象都应该能够按整个屏幕的百分比放置到所需位置
• 对象应该能够覆盖同一位置的其他对象

抱歉英语不好：|

Answer 1

我不确定你的问题。让我试着回答这个问题。在css中，变量vh表示视口高度，vw表示视口宽度。

其想法是放置元素的30%高度=30vh，50%宽度=50vw。我们可以将父元素设置为具有相对位置，将要设置的子元素设置为绝对位置。

它会是下面的样子。感谢

body {
position: relative;
width: 100%;
height: 100%;
display: block;
color: #fff;
background: #000;
}
#screen .child {
position: absolute;
top: 30vh;
left: 50vw;
background: red;
width: 100px;
height: 50px;
}

<div id="screen">
Parent
<div class="child">
</div>
</div>

Answer 2

试试这个CSS

.fixed-div{
position: fixed;
left: 50vw;
top: 30vh;
transform: translate(-50%, -50%); /* Moves the center of the element to its original top left corner*/
z-index: 1;
}