0

Есть родительский 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>"; 
};
1

1 ответ 1

0

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>

5
  • Я так как вы написали и понимаю теорию. Относительно вашего примера: Представьте что ваш первый блок с текстом relative позиционируется относительно красного. А следующий блок (у меня их несколько) с ТАКИМ ЖЕ кодом только разные top и left вдруг позиционируется относительно Default. У меня так выходит
    – musorgsky
    9 дек 2018 в 10:07
  • @musorgsky, тогда добавьте рабочий пример который будет отображать вашу проблему
    – E_K
    9 дек 2018 в 10:19
  • сейчас попробую. Спасибо
    – musorgsky
    9 дек 2018 в 10:20
  • Я исправил по вашим замечаниям, но основная проблема не ушла
    – musorgsky
    9 дек 2018 в 16:48
  • @musorgsky, добавьте нормальный пример который можно запустить и он будет отображать проблему, сейчас я уже не пойму что вы хотите и что вас не устраивает.
    – E_K
    9 дек 2018 в 16:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.