我希望这个 float Pane 最初定位在距离父级位置顶部 40px 的位置。当前结果(显示在 JSFiddle 中)是 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;
}
http://jsfiddle.net/9qqtbe4y/4/
您可以看到红色 div 如何相对于父级正确定位，但 floatPane 却没有。
最佳答案
float Pane 的父位置是从顶部向下 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>
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;
}
关于javascript - float Pane 不遵守相对于父级的绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33635894/