gpt4 book ai didi

javascript - float Pane 不遵守相对于父级的绝对位置

转载 作者:行者123 更新时间:2023-11-28 06:42:57 26 4
gpt4 key购买 nike

我希望这个 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com