элементы на 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%">

я пытаюсь получить экран на ТВ, но он не будет оставаться, как разрешение меняется обе дивы перевести как увеличить в уменьшении масштаба

Answer 1

Ваш вопрос действительно выиграет от ссылки jsfiddle, поскольку то, что вы опубликовали, недостаточно детально для создания воспроизводимого примера, но я думаю, что понимаю центральную проблему. Вы хотите, чтобы div .screen, казалось бы, позиционировался последовательно внутри элемента .tv, правильно? Я думаю, вы можете приблизиться к этой проблеме с неправильного угла.

Вместо того, чтобы делать .tv и .screen братьями и сестрами, вы можете создать элемент контейнера для обоих. Затем вы можете абсолютно поместить экран с% размерами относительно телевизора.

Посмотрите сами с этим 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 должен дать вам лучший способ горизонтального/вертикального центрирования.