Элементы с position: absolute при масштабировании позиционируются относительно окна и разлетаются кто куда. Почему и как исправить?

Question

[creatoroftheworld]

пример

<div class="parent">
  		<div class="child"></div>
  <div class="child"></div>
	</div>

.parent{
  	position: relative;
}
/*блок слева сверху:*/
.child{
  	position: absolute;
  top: 0;
  	left: 0;
}
/* блок справа сверху:*/
.child:last-child{
  	right: 0;
  	left: auto;
}

(дабы не путать вас, здесь не присваивал элементам ширины, высоты, бакграунды и тп)

При изменении масштаба в браузере, элементы начинают позиционироваться относительно окна
Пока писал, догнал, что это кажись потому что при "width: 100%" или "дисплей: блок" - блок занимает 100% окна. ОКНА.

Думал, мож родитель с "pos: relative" чето исправит, ан фиг там

мне нужно чтоб они стояли на своих местах, но родитель априори должен быть с нефиксрованной шириной(width: 100%)
Есть решение?

Answer 1

[Андрей]

Абсолютные элементы всегда позиционируются относительно первого родителя с position. Проверьте что при масштабировании его границы там, где ожидаются.
Ваш пример на jsfillde прекрасно работает: jsfiddle.net/jaro5bxp

Answer 2

[Алексей Вечканов]

Используй еще один div. Тот, что шириной 100%, родителем. Внутри него div c margin: 0 auto; с фиксированной шириной, а в нем уже ваши абсолютные childrens. Надеюсь угадал проблему.

Answer 3

[Руслан Абдуллаев]

Задайте значение для абсолютно спозиционированных элементов не в абсолютных величинах (px), а в относительных (%, em).
Т.е., left: 345px при ширине макета в 1000px, будет равна: (345/1000)*100% = 34.5%

Answer 4

[Виталий Киренков]

А зачем вам абсолют? Что мешает сделать float, а блокам задать ширину в процентах?