Позиционирование вложенных div CSS

136

05 июня 2019, 15:20

Есть родительский div. Внутри него у меня находятся множество других div с атрибутом position:relative. У них разные отступы top и left.

Я не могу понять почему позиции некоторых таких вложенных div отсчитываются от верхнего левого края родительского div, а какие то вдруг от середины этого родительского div? Хотя свойства у них одинаковые.. Если изменить top на отрицательные значения, то получается спозиционировать. Код родительского div:

.tableOverLO {position: relative; width:1156; height:822; background: url(LOnew.png); border-radius: 150px; border: solid;}

Ниже вложенные в родительский (их несколько, разница только в top и left):

.viborg {position: relative; width: 3%; top: 190; left: 170; border-radius: 20px; padding: 10px; font-family: Arial; color: white; font-size: 30; background-color: #f38630; text-align: center;}
.priozersk {position: relative; width: 3%; top: 70; left: 310; border-radius: 20px; padding: 10px; font-family: Arial; color: white; font-size: 30; background-color: #f38630; text-align: center;}
.gatchina {position: relative; width: 3%; top: 400; left: 330; border-radius: 20px; padding: 10px; font-family: Arial; color: white; font-size: 30; background-color: #f38630; text-align: center;}
.volosovo {position: relative; width: 3%; top: 370; left: 210; border-radius: 20px; padding: 10px; font-family: Arial; color: white; font-size: 30; background-color: #f38630; text-align: center;}
.kingisepp {position: relative; width: 3%; top: 160; left: 100; border-radius: 20px; padding: 10px; font-family: Arial; color: white; font-size: 30; background-color: #f38630; text-align: center;}

А следующий (который с такими же свойствами как выше) позиционируется в место примерно соотносящееся с серединой родительского div .tableOverLO ???

.luga {position: relative; width: 3%; top: 1; left: 1; border-radius: 20px; padding: 10px; font-family: Arial; color: white; font-size: 30; background-color: #f38630; text-align: center;}

Почему тогда остальные ставятся верно?

Вывод div производится следующим образом:

// Волосовский на карте
if ($total_volosovo!=0) {
echo "<div class=\"volosovo\">" . $total_volosovo . "</div>"; 
};

Answer 1

relative устанавливает положение относительно исходного места элемента(красный блок), а свойства top, left и другие сдвигают его относительно этого места. Если у элемента установленно значение absolute, то другие элементы его не замечают, а сам absolute может позиционироваться с помощью top,left и др., но на него так же влияет значение position родительского элемента. Как в данном примере, если бы у container не было бы position, то absolute позиционировался относительно окна браузера или другого родительского элемента с position.

Вам нужно подробнее изучить позиционирование, так как там есть и другие свойства.

UPD. Исправьте ошибки в css, добавьте единицы измерения для width:1156; height:822;, top: 70; left: 310;, font-size: 30; и других.

.container { 
  position: relative; 
  width: 700px; 
  margin: 3rem auto; 
  padding: 30px; 
  border: 1px solid; 
  box-sizing: border-box; 
  display: flex; 
} 
 
.block { 
  width: 100%; 
  max-width: 200px; 
  height: 200px; 
  background-color: #eaeaea; 
} 
 
.wrapper { 
  width: 200px; 
  height: 200px; 
  background-color: red; 
  margin-right: 25px 
} 
 
.default { 
  margin-right: 25px 
} 
 
.relative { 
  position: relative; 
  top: -20px; 
  left: 10px; 
} 
 
.absolute { 
  position: absolute; 
  right: 0; 
  bottom: -50%; 
  background-color: green; 
}

<div class="container"> 
  <div class="block default"> 
    Default 
  </div> 
  <div class="wrapper"> 
    <div class="block relative"> 
      Relative 
    </div> 
  </div> 
  <div class="block absolute"> 
    Absolute 
  </div> 
</div>