Question

enter image description here

嗨，

附加的screenchot是我们的应用程序的模型，其中有许多小部件可以在整个屏幕上自由移动。其他一切正常，除了最小化小部件功能。 PFA屏幕截图显示单击设置按钮（屏幕截图中的箭头开始）后出现的实际问题。我们面临的问题是最小化块的定位。我们需要在设置按钮下面实现它，但是它来自小部件区域。

请在下面找到相同的代码段和详细信息。

使用JQUERY文件格式化最小化功能，并使用UL-LI

形成HTML

使用以下代码片段完成UL的CSS。

ul. editModule
{
Display:none;
z-index:200;
position:absolute;
left:177px;
top:3px;
padding-top:2px;
clear:left;
}

The minimize box in the screen shot is being made using below code snippet:-

<ul class=”editModule”><li class=”editColor”><ul class=”moduleColor”><li class=”module-colorWheel”></li><li class=”moduleChoice-blue” title=”module-blue”></li><li class=”moduleChoice-green” title=”module-green” ></li><li class=”moduleChoice-red” title=”module-red” ></li><li class=”moduleChoice-yellow” title=”module-yellow” ></li></ul></li>
<li class=”applyAll”><a href=”#” class=”closeModule”>Close Widget</a></li>
<li class=”minimize”><a href=”#” class=”minimizeModule”>Minimize Widget</a></li>
</ul></li></ul>

当我点击设置按钮（箭头开始）时，它会在错误的位置打开小部件的最小化功能框。理想情况下，位置应位于听筒中的“设置”图标下方，即右上角。

对此有任何帮助都很棒。如果需要进一步的输入，请发表评论。

Answer 1

所以问题是pop-out div出现在错误的位置？请尝试为弹出元素的父容器提供 position：relative 的CSS样式。 position：绝对在整个屏幕上工作，除非绝对定位元素的父容器也有定位集。

埃里克

编辑：我给你做了一些HTMl，其中editModule相对于标题栏是绝对的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<style>

ul li {text-decoration:none; float:left;}

.titlebar {
    background-color:green;
    height:20px;
    position:relative;
    }

.editModule
{
    position: absolute;
    right: 0px;
    top: 20px;
    border:1px solid red;
    float:right;
    padding-top:2px;
}


</style>

</head>

<body>

<div class="titlebar">

    <ul class="editModule">
        <li class="editColor">
            <ul class="moduleColor">
                <li class="module-colorWheel">CW</li>
                <li class="moduleChoice-blue" title="module-blue">BLUE</li>
                <li class="moduleChoice-green" title="module-green" >GREEN</li>
                <li class="moduleChoice-red" title="module-red" >RED</li>
                <li class="moduleChoice-yellow" title="module-yellow" >YEL</li>
            </ul>
        </li>
        <li class="applyAll"><a href="#" class="closeModule">Close Widget</a></li>
        <li class="minimize"><a href="#" class="minimizeModule">Minimize Widget</a></li>
    </ul>

</div>

<!-- </li></ul> -->


</body>
</html>

Answer 2

尝试删除clear: left;命令。与position: absolute一起清除并没有多大意义。

CSS绝对定位不起作用

2 个答案: