Fatal编程技术网
  • javascript/
  • Javascript 浮动窗格不符合相对于父窗格的绝对位置

Javascript 浮动窗格不符合相对于父窗格的绝对位置

javascript dojo

Javascript 浮动窗格不符合相对于父窗格的绝对位置,javascript,dojo,Javascript,Dojo,我希望这个浮动窗格最初位于距离父位置顶部40px的位置。当前结果（显示在JSFIDLE中）是top:140px，而不是预期的top:40px <body class="tundra"> <div style="height:100px;background-color:blue;"></div> <div style="position:relative;"> <div style="background-co

我希望这个浮动窗格最初位于距离父位置顶部40px的位置。当前结果（显示在JSFIDLE中）是
top:140px
，而不是预期的
top:40px

<body class="tundra">
    <div style="height:100px;background-color:blue;"></div>
    <div style="position:relative;">
        <div style="background-color:red;" class="paneClass"></div>
        <div id="simplepane1"></div>
    </div>
</body>

require(["dojox/layout/FloatingPane", "dojo/domReady!"], function(FloatingPane) {
    var floatingPane1 = new FloatingPane({
        class: "paneClass"
    }, document.getElementById("simplepane1"));
    floatingPane1.startup();
});

.paneClass{
    position:absolute;
    top:40px;
    left:40px;
    width:200px;
    height:300px;
}


require（[“dojox/layout/FloatingPane”，“dojo/domReady！”]，函数（FloatingPane）{
var floatingPane1=新的FloatingPane({
类：“paneClass”
}，document.getElementById（“simplepane1”）；
floatingPane1.startup（）；
});
.paneClass{
位置：绝对位置；
顶部：40px；
左：40px；
宽度：200px；
高度：300px；
}

您可以看到红色的
div
相对于父级的位置如何正确，但浮动窗格不正确。

浮动窗格的父级位置是从顶部向下100px（这100px是“tundra”类中第一个div的高度）。所以，当它收到增加40px的指令时，它会从顶部移动总计140px

按如下所示重写HTML代码将解决此问题。更改是将第一个div的位置设置为
relative

<div style="height:100px;background-color:blue;position:relative;"></div>
<div style="background-color:red;" class="paneClass"></div>
<div id="simplepane1"></div>
浮动窗格的父级位置是从顶部向下100px（这100px是类“tundra”中第一个div的高度）。所以，当它收到增加40px的指令时，它会从顶部移动总计140px

按如下所示重写HTML代码将解决此问题。更改是将第一个div的位置设置为
relative

<div style="height:100px;background-color:blue;position:relative;"></div>
<div style="background-color:red;" class="paneClass"></div>
<div id="simplepane1"></div>
之所以会出现这种情况，是因为浮动窗格是作为绝对定位的元素构建的，并且其样式也要与之匹配。因此，当从相对框的顶部设置40px时，它实际上会基于其父对象添加100。根据您对此的操作，我建议不要将浮动窗格放在具有固有
top
值的div中。如果不希望浮动窗格与顶部栏重叠，可以将其约束在框内。（不是我的）就是这样一个例子

如果您不想关心这个问题，那么只需从包含div中删除
位置：relative
，并将浮动div的默认样式更改为
top:140px也会起作用。
之所以会出现这种情况，是因为浮动窗格是作为绝对定位的元素构建的，并且它的样式也要与此匹配。因此，当从相对框的顶部设置40px时，它实际上会基于其父对象添加100。根据您对此的操作，我建议不要将浮动窗格放在具有固有
top
值的div中。如果不希望浮动窗格与顶部栏重叠，可以将其约束在框内。（不是我的）就是这样一个例子


如果您不想关心这个问题，那么只需从包含div中删除
位置：relative
，并将浮动div的默认样式更改为
top:140px也将起作用。
看起来FloatingPane正在重新计算位置并向其添加100px。。。也许看看源代码能给我们一些启示？我现在正在研究。另一个有趣的是，最小化然后最大化浮动窗格似乎每次都会增加100px。看起来浮动窗格正在重新计算位置并向其添加100px。。。也许看看源代码能给我们一些启示？我现在正在研究。另一个有趣的是，最小化然后最大化浮动窗格似乎每次都会增加100px。我不知道这是如何解决问题的。现在连红色的
div
都没有正确定位。我看不出这是如何解决问题的。现在，甚至红色的
div
也没有正确定位。

.paneClass{
position:absolute;
top:140px;
left:40px;
width:200px;
height:300px;
}