0

Добрый день!

Есть Div, в котором внутри несколько других Div, с атрибутами position:absolute. Размеры и координаты всех фиксированны и известны. Нужно передвинуть родительский DIV так, чтоб все внутренние DIV'ы визуально на экране в целом выглядели на прежнем месте.

Всё былоб просто, но координаты внутренних подобъектов тоже должны измениться на расстояние перемещения родительского объекта (эта цифра известна, допустим 20px).

Пробовал менять CSS родительского и в цикле менять координаты каждого внутреннего DIV, но так не подходит - всёравно на глаз заметно дёргание при перемещении. Хотелось бы одним движением переместить родительский объект, а внутренние объекты чтоб подстроились сами автоматически и мгновенно. Как такое сделать? Важна скорость.

Код:

<div style="position:absolute; top:50px; left:100px;">
    <div style="position:absolute; top:10px; left:15px;"></div>
    <div style="position:absolute; top:10px; left:55px;"></div>
</div>
7
  • Не совсем понятна ситуация. Нужно визуально сохранить положения дочерних дивов относительно родительского дива или относительно картины в целом? Какое позиционирование у родительского дива? Приведите ваш код.
    – user31906
    28 мая 2015 в 7:21
  • Да, "Нужно визуально сохранить положения дочерних дивов относительно родительского дива". У родительского объекта сейчас позиционирование тоже абсолютное. Пример кода добавлю в главный пост
    – alexoy
    28 мая 2015 в 7:27
  • В таком случае дочерние абсолютные элементы должны итак следовать за родителем т.к. позиционируются относительно него.
    – user31906
    28 мая 2015 в 7:37
  • Они следуют, а нужно именно сделать вид, что они остались на старом месте как независимые, т.е. не двигались
    – alexoy
    28 мая 2015 в 7:40
  • Дак что нужно то: "Да, "Нужно визуально сохранить положения дочерних дивов относительно родительского дива"." Или наоборот от общей картины
    – user31906
    28 мая 2015 в 7:44

2 ответа 2

1

Если у тебя через цикл выходит дергание (что в общем-то странно, м.б. ты где-то в js ошибся - но ты его здесь не привел, так что ладно) - почему бы тебе не пойти на хитрость и не сделать так:

<div id="back" style="position:absolute; top:50px; left:100px;"></div>
<div id="box" style="position:absolute; top:50px; left:100px;">
    <div style="position:absolute; top:10px; left:15px;"></div>
    <div style="position:absolute; top:10px; left:55px;"></div>
</div>

#box сделать без визуального оформлеия, которое перенести на #back (задав ему размеры, равные #box и z-index на единицу меньше. Таким образом, когда потребуется, ты сможешь двигать этот самый #back вместо #box - визуально это будет выглядить так, словно ты двигаешь этот самый Div оставляя дочерние элементы на месте. Можно поместить #back и в сам #box, задав ему минимальный z-index если хочешь, чтобы до какого-то времени они двигались синхронно

<div id="box" style="position:absolute; top:50px; left:100px;">
<div id="back" style="position:absolute; top:50px; left:100px;"></div>
    <div style="position:absolute; top:10px; left:15px;"></div>
    <div style="position:absolute; top:10px; left:55px;"></div>
</div>
-1
.parent {top:50px; left:100px;}
.parent .child1 {top:10px; left:15px;}

.parent.move {top:70px; left:120px;}
.parent.move .child1 {top:-10px; left:-5px;}
1
  • Можно подробней? Неочень понятно как этим воспользоваться, при нажатии кнопки например
    – alexoy
    28 мая 2015 в 8:24

Ваш ответ

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

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