Question

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

top:40px

http://jsfiddle.net/9qqtbe4y/4/

您可以看到红色<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; }相对于父级的位置是正确的，但是floatPane没有。

Answer 1

浮动窗格的父级位置从顶部向下100px（此100px是类内第一个div的高度＆＃34; tundra＆＃34;）。因此，当它获得更多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>

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

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

Answer 2

这是因为浮动窗格是作为一个绝对定位的元素构建的，它的样式也是为了匹配它。因此，当从相对框的顶部设置40px时，它实际上会根据它的父级添加100。根据您要对此进行的操作，我建议不要将浮动窗格放在具有固有top值的div中。如果您不希望浮动窗格与顶部栏重叠，则可以查看将其约束在框内。 Here（不是我的）就是这样做的一个例子。

如果您不想关心它，那么只需从包含div中删除position: relative并将浮动div的默认样式更改为top: 140px;也可以。

浮动窗格不遵循相对于父级的绝对位置

2 个答案: