1

Поймал элемент на сайте

var korzina = document.getElementById('container_topbar_right');

Теперь мне надо создать плавающий блок, который допустим на 20px ниже корзины. Как это сделать без jquery. + я не могу сделать корзину position: absolute;

C помощью jquery я бы сделал так:

$(korzina).after('<div style = "position: absolute; top: 20px;">Нужный блок</div>');

Пробовал вот так:

var korzina = document.getElementById('container_topbar_right');
korzina.appendChild('<div style = "position: absolute; top: 20px;">Нужный блок</div>');

Тоже не работает.

2 ответа 2

1

http://jsfiddle.net/BvF2t/2/

<div id="trash" style="width: 200px; height: 100px; background-color: #acc;"></div>

<script>
    var trash = document.getElementById('trash');
    var trashTop = trash.getBoundingClientRect().top;
    var div = document.createElement("div");

    div.style.cssText="position: absolute; \
        width: 200px; \
        height: 50px; \
        background-color: #cac; \
        top: " + Math.floor(trashTop + 20) +"px; \
    ";

    trash.appendChild(div);
</script>
0

задай родительскому контейнеру position: relative, тем самым твой элемент будет позиционироваться относительно родительского. Элемент который хочешь спозиционировать задавай ему position: absolute.

Например:

<div style="position: relative">
   <div style="position: absolute; top: 20px; left: 0;">
     text
   </div>
</div>

UPD Попробуй вот так сделать:

   <script>
        var cart = document.getElementById("container_topbar_right");
        var floatingBlock = document.createElement("div");

        floatingBlock.style.position = "absolute";
        floatingBlock.style.top = 20 + "%";
        cart.appendChild(floatingBlock);
    </script>
2
  • у меня нет доступа к родительскому элементу 14 авг 2013 в 12:30
  • добавил другой вариант к своему ответу, попробуйте его 14 авг 2013 в 15:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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