Расчет "левый" и "верхний" значение из фиксированного расположенного плавающего элемента

Question

Ниже мой код:

HTML:

<div id="test"> 
This text is fixed in one spot 
</div> 

CSS:

#test{ 
    border:1px solid black; 
    position: fixed; 
    margin: 8px; 
    right: 0px; 
    bottom: 0px; 
    height: 200px; 
    width: 50%; 
    z-Index: 4; 
} 

До сих пор я могу сделать ящик в фиксированном положении и отобразить его правильно (высота 200 пикселей и ширина 50 процентов экрана). Ширина изменяется при изменении ширины экрана, но проблема заключается в том, что я хочу рассчитать положение пикселя в верхнем левом углу окна, потому что я не хочу, чтобы какая-либо часть окна отображалась поверх рекламного блока AdSense. У меня есть рекламные блоки в левой части экрана.

Я пытался в JavaScript, получив значения самого левого пикселя окна, как это:

<script> 
alert(document.getElementById('test').left); 
alert(document.getElementById('test').style.left); 
</script> 

И я не получил номер из любого окна сообщения. Все, что у меня было, было пустым и «неопределенным».

Есть ли способ, чтобы положение левого пикселя поля можно было вычислять, не вызывая значение через регулярные интервалы через таймер javascript?

И нет, я не хочу использовать JQuery.

Answer 1

Я думаю, что вы ищете offsetLeft и offsetTop методов.

alert(document.getElementById('test').offsetLeft); 
 
alert(document.getElementById('test').offsetTop);

#test{ 
 
    border:1px solid black; 
 
    position: fixed; 
 
    margin: 8px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    height: 200px; 
 
    width: 50%; 
 
    z-Index: 4; 
 
}

<div id="test"> 
 
This text is fixed in one spot 
 
</div>