Позиция div сверху

Question

Итак, я хочу позиционировать поверх другого div, который имеет фоновое изображение. Изображение-div обладает следующими свойствами:

position: absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background-image: url('../img/1.jpg'); 
background-size: contain; 
background-repeat: no-repeat; 
background-position: center center; 

Это похоже на все устройства. Но теперь мне нужно наложить изображение-div с помощью интерактивного div, который соответствует определенной части изображения. Как легко подобрать div, просто установите положение на абсолютное и установите верхнюю, левую, ширину и высоту, но как только я покажусь в другом разрешении/плотности, div выключен, нет никаких сюрпризов. Поэтому я попытался с позиционированием с помощью% или vh и vw, но ничего не работает.

Как бы я поместил divs поверх изображения, независимо от того, какое устройство, разрешение и плотность я нахожусь?

Answer 1

<style type="text/css"> 
    #div_1 
     { 
      position:relative; 
      top:0; 
      left:0; 
      width:100%; 
      height:200px; 
      background-image: url('../img/1.jpg'); 
      background-size: contain; 
      background-repeat: no-repeat; 
      background-position: center center; 
     } 
    #div_2 
     { 
      position:absolute; 
      width:50%; 
      height:60%; 
      margin:0px auto; 
     } 
    </style> 
    <div id="div_1"> 
     <div id="div_2"> 
      testing... 
     </div> 
    </div> 

Answer 2

Вы можете использовать div внутри в div с background-image, но затем поместите его в DIV, где вы хотите использовать % с, не px или абсолютные значения.

#bg{ 
 
position: relative; 
 
width:100vw; 
 
height:100vh; 
 
background-image: url('/favicon.ico'); 
 
background-size: contain; 
 
background-repeat: no-repeat; 
 
background-position: center center; 
 
    z-index: 5 
 
    } 
 
#overlay { 
 
    position: absolute; 
 
    height: 40%; 
 
    width: 30%; 
 
    z-index: 10; 
 
    top: 13%; 
 
    left: 34% 
 
} 
 
#overlay:hover { 
 
    background-color: rgba(50,50,200,0.5); 
 
}

<div id="bg"> 
 
    <div id="overlay"></div> 
 
</div>

Answer 3

Это сочетание background-position, background-size и смещение в процентах от содержащего дел.

Держите background-position при определенном значении, чтобы пятно на изображении всегда находилось на экране.
Используйте background-size: cover; или background-size: contain;, чтобы сохранить изображение (или его контейнер) отзывчивым.
Если у вас есть два или более пятна на внешних краях изображения, я предлагаю использовать contain, но это значительно уменьшит размер изображения на меньших экранах, в то время как ваш внутренний div останется достаточно большим.
В других случаях используйте cover для изменения размера.

Здесь я создал пример: (я использовал Jquery UI, чтобы сделать изображение изменяемого)

$(function() { 
 
    $("#resizable").resizable(); 
 
    });

.container { 
 
    background-image: url('https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop='); 
 
    background-size: cover; 
 
    background-position: 50% 50%; 
 
    height: 500px; 
 
    position: relative; 
 
    width: 800px; 
 
} 
 
.hit-me-container { 
 
    height: 16px; 
 
    left: 52%; 
 
    position: absolute; 
 
    top: 45%; 
 
    width: 16px; 
 
} 
 
.hit-me { 
 
    animation: pulse 1s ease infinite; 
 
    background-color: #fff; 
 
    border: 3px solid #777; 
 
    box-sizing: border-box; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.hit-me-container:hover:after { 
 
    background-color: #333; 
 
    color: #fff; 
 
    content: 'Buy these glasses'; 
 
    display: block; 
 
    font-family: sans-serif; 
 
    font-size: 12px; 
 
    left: 20px; 
 
    padding: 5px; 
 
    position: absolute; 
 
    width: 100px; 
 
    top: -4px; 
 
} 
 

 
@keyframes pulse { 
 
    0% { transform: scale(1); } 
 
    50% { transform: scale(1.1); } 
 
    100% { transform: scale(1); } 
 
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="container" id="resizable"> 
 
    <div class="hit-me-container"> 
 
    <div class="hit-me"></div> 
 
    </div> 
 
</div>

Или проверить этот fiddle