CSS絕對定位不工作

嗨，

附screenchot是我們的應用程序的樣機在那裏的各種小工具，其是可自由移動通過屏幕上的所有的-N-數。除了最小化小部件功能之外，其他一切工作都正常點擊設置按鈕後出現的實際問題PFA屏幕截圖（屏幕截圖中的箭頭開始）。我們面臨的問題是最小化塊的定位。我們需要在設置按鈕的下方實現它，但它是從小部件區域出來的。

請在下面的代碼段找到相同的細節和細節。

最小化功能正在使用與形成使用UL-LI

UL的CSS使用下面的代碼片段所做的HTML jQuery的文件格式。

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>

當我點擊設置按鈕（箭頭開始）時，它會在小部件的錯誤位置打開最小化功能框。理想情況下，位置應該低於聽衆的設置圖標，即右上角。

任何有關這方面的幫助將是偉大的。如果需要進一步的輸入，請發表評論。

來源

2011-08-03 Chat

是什麼PFA是什麼意思？編輯：可能是'請找到附加'。 – Ariel

您的小部件放置在頁面中的哪個位置？你能提供更多的代碼嗎？ –

@Ariel：是的，請找到附件 – Chat

嘗試刪除clear: left;命令。與position: absolute一起清除並不合理。

來源

2011-08-03 07:26:20 Ariel

我試了一下，沒有太多的幫助.. – Chat

所以問題是彈出div顯示在錯誤的位置？請儘量給予父母容器的彈出式元素CSS樣式位置：相對。位置：絕對工作在整個屏幕上，除非絕對定位元素的父容器也具有定位設置。

埃裏克

編輯：我做了你一些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>

來源

2011-08-03 07:30:00

另外，因爲你想彈出框被定位在父容器的右上角，我建議定位彈出框使用頂部和右側，而不是頂部和左側你有你的代碼。 – Leah

@rico：根據您在使用父容器時給出positioin的解決方案：相對父母CSS沒有被捕獲。只有孩子的CSS正在被分配。在這種情況下我們必須做什麼。 – Chat

@Chat：我不確定你的意思; 它工作，但父容器的樣式是否被跳過？ –

CSS絕對定位不工作

回答

相關問題