CSS Absolute positioning not working
Hi,
Attached screenchot is mockup of our application where in their are -n- number of widgets which are freely movable all through the screen. Everything else works fine except minimize widget functionality. PFA screen shot for the actual problem which comes up after clicking settings button (start of arrow in screen shot). The problem that we are facing is with the positioning of minimize block. We need to achieve it just below the setting button, but it is coming out of widget area.
Please find below code snippet and detail for the same.
The Minimize functionality is being formatted using the JQUERY file with forming the HTML using UL-LI
The CSS for the UL is done using below code snippet.
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开发者_如何学JAVA=”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>
When I click on the settings button(start of arrow) it opens the minimize functional box for the widget in a wrong location. Ideally the position should be just below the Settings icon in the hearder i.e. Top right corner.
Any sort of help regarding this will be great. if any further input is required do post comments.
So the problem is that the pop-out div is showing up in the wrong location? Please try to give the parent container of the pop-out element a CSS style of position:relative. position:absolute works on the whole screen, unless the parent container of the absolute positioned element also has positioning set.
Erik
EDIT: I have made you some HTMl where the editModule is placed absolute relative to the titlebar:
<!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>
Try removing the clear: left; command. Clear together with position: absolute doesn't really make sense.
加载中,请稍侯......
精彩评论