html - html 页面上的元素随着分辨率的变化而改变位置

Question

    .screen {
      z-index: 100000;
      overflow: hidden;
      background: #333;
      width: 1840px;
      height: 1090px;
      top: 400px;
      left: 965px;
      outline: 1px solid transparent;
      -webkit-transform-origin: 0px 0px 0px;
      transform-origin: 0px 0px 0px;
      -webkit-transform: matrix3d(0.9828571428571429, 0, 0, -0.00003284072249589491, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) transform: matrix3d(0.9828571428571429, 0, 0, -0.00003284072249589491, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
    }

<div class="screen">
  <ul id="slideshow" class="slideshow">
    <li class="slideshow__item">
      <img src="img/large/2.png" />
    </li>
    <li class="slideshow__item">
      <img src="img/large/3.png" />
    </li>
    <li class="slideshow__item">
      <img src="img/large/4.png" />
    </li>
    <li class="slideshow__item">
      <img src="img/large/1.png" />
    </li>
  </ul>
</div>
<center>
  <img class="tv" src="360.png" style="position:fixed;left: 935px;top:0px;
     z-index: -99;" width="50%" height="90%">

我正在尝试将屏幕显示在电视上，但它不会随着分辨率的变化而停留 当我们放大缩小时，两个 div 都会翻译

Answer 1

jsfiddle 链接会让你的问题真正受益，因为你发布的信息不够详细，无法创建可重现的示例，但我想我理解中心问题。你想要一个 .screen div 似乎始终位于 .tv 内元素，对吗？我认为您可能从错误的 Angular 处理了这个问题。

而不是制作 .tv和 .screen sibling ，您可能想为两者制作一个容器元素。然后你可以绝对定位屏幕相对于电视的 % 尺寸。

自己看看这个 jsfiddle .

HTML:

<div class="tv-container">
    <img class="tv" src="http://i.imgur.com/PB2GB1q.png">
    <div class="screen">
</div>

CSS:

.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;
}

此外，不要使用 <center> .就像，曾经。 jsfiddle 应该为您提供更好的水平/垂直居中方式。