html页面上的元素在分辨率改变时改变位置

屏幕{
z指数：100000；
溢出：隐藏；
背景：#333；
宽度：1840px；
高度：1090px；
顶部：400px；
左：965px；
外形：1px实心透明；
-webkit转换源：0px 0px 0px；
变换原点：0px 0px 0px；
-webkit转换：matrix3d（0.9828571428571429,0,0，-0.00003284072249589491,0,1,0,0,0,0,1,0,0,0,1）转换：matrix3d（0.9828571428571429,0,0，-0.00003284072249589491,0,1,0,0,0,0,0,1,0,0,0,0,0,1）
}

您的问题将真正受益于JSFIDLE链接，因为您发布的信息不够详细，无法创建一个可复制的示例，但我想我理解核心问题。您希望一个

.screen

div看起来始终位于

.tv

元素中，对吗？我认为你可能从错误的角度看待这个问题

与其将

.tv

和

.screen

作为同级，不如为这两个元素创建一个容器元素。然后，您可以绝对定位屏幕，使其相对于电视的尺寸为%

自己看看这个。

HTML:

---

另外，不要使用

。就像，永远。JSFIDLE应该为您提供更好的水平/垂直居中方式。

尝试在设计中使用

百分比

而不是设置

像素

单位。（例如，将宽度和高度更改为100%）。或者，如果需要，您可以使用

calc（100%-500px）作为旁注
已被弃用，它不会影响
修复的
元素谢谢：）jbutler483和FabrizioCalderan@Fabrizio卡尔德兰我在绝望中利用中心试图解决这个问题：）非常感谢你们的指导
<div class="tv-container">
    <img class="tv" src="http://i.imgur.com/PB2GB1q.png">
    <div class="screen">
</div>

.tv-container {
    position: fixed;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tv {
    width: 100%;
}

.screen {
    position: absolute;
    left: 2.5%;
    top: 3%;
    width: 95%;
    height: 70%;
    background: green;
}