无论屏幕大小如何如何将DOM元素放置在完全相同的位置？

Question

我试图添加一些输入框，这些输入框应始终位于同一位置，但是当我在Macbook中查看网页时，与使用较大的显示器查看该输入框的位置不同。解决此问题的最佳方法是什么？这是我正在尝试或多或少要做的事情的一个提法。

<input name="arrive" type="date" placeholder="Arrival date:">

input[name="arrive"] {
    position: absolute;
    width: 16.9em;
    top: 18vw;
    left: 15vw;
}

https://jsfiddle.net/8mn5cdwt/1/

Answer 1

视口宽度（vw）单位基于视口的宽度。您需要以像素为单位指定位置，而不是以vw为单位：

<input name="arrive" type="date" placeholder="Arrival date:">

// 180 and 150 are your values in pixels (you need to replace them 
// with what you need)
input[name="arrive"] {
    position: absolute;
    width: 16.9em;
    top: 180px;
    left: 150px;
}

Answer 2

vw是指视口的宽度。如果您的视口宽度为1920px，那么您的top现在为0.18 * 1920px = 345.6px；如果是720像素，则会更改为129.6像素。

我也不确定您的问题，但通常在设置top时，您将使用vh（视口高度）。

尝试使用像素设置位置。例如top: 120px;