计算“;“左”;以及“;顶部“;来自固定位置浮动元素的值

Calculating "left" and "top" value from fixed positioned floating element

本文关键字：位置 定位 元素 以及 顶部 计算      更新时间：2023-09-26

以下是我的代码：

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%）。宽度随着屏幕宽度的变化而变化，但我的问题是，我想计算盒子的左上角像素位置，因为我不希望盒子的任何部分出现在任何广告单元的顶部。我的广告单元在屏幕的左侧。

我尝试在javascript中获取盒子最左边像素的值，如下所示：

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

我没有从任何一个信息框中得到一个号码。我得到的只是一片空白和"未定义"。

有没有一种方法可以计算方框左上角的像素位置，而无需通过javascript计时器按规则间隔强制值？

不，我不想使用Jquery。

我认为您正在寻找的是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>

相关文章：