將元素懸浮在其他元素上並將一些但不是全部元素向下推

有關問題的圖片，請參閱此This Image。將元素懸浮在其他元素上並將一些但不是全部元素向下推

我有一個在文本字段下顯示列表的div。這是一個假的組合框，使用文本元素和JavaScript。當有人類型應該覆蓋其他表單元素時出現的列表，但也應該使包裝div更大，所以它不會被切斷。我只能做一個或另一個。

下面是相關的HTML

<td id="EditorMainColumn"> 
    <div id="EditorPanesWrapper"> 
     <div style="display: block;"><!-- a Jquery Tools Tab, also the problem div --> 
      <div class="EditorFormFieldWrapper"> 
       <label>My Field</label> 
       <input class="EditorInput" name="name"> 
      </div> 
      <br class="ClearBoth"><!-- I don't know if this helps or not --> 
      <div class="ComboBoxListWrapper"> 
       <div class="ComboBoxList"> 
        <!-- <a> elements are inserted dynamically here --> 
       <br class="ClearBoth"><!-- I don't know if this helps or not --> 
       </div> 
      </div> 
      <div><!-- Cover me! --> 
       You can't see this when the combo box is open... 
      </div> 
     </div><!-- END display:block div --> 
    </div><!-- END EditorPanesWrapper --> 
</td>

CSS：

#EditorMainColumn { 
    overflow:hidden!important; 
    background:#f9f9f4; 
    border-top:1px solid black; 
    padding:20px; 
    color:#432c01; 
} 

#EditorPanesWrapper { 
    width:auto; 
    margin-right:20px; 
    overflow:auto; 
} 

.ComboBoxListWrapper{ 
position:relative; 
top:-10px; 
} 

.ComboBoxList{ 
border: 1px solid red; 
width:288px; 
position:absolute; 
z-index:2; 
margin-left:180px; 
} 

.ComboBoxList a { 
    display:block; 
    border: 1px solid #DDD7C6; 
    border-top:0px; 
    float: left;  
    padding: 8px; 
    padding-left:0px; 
    top:-11px; 
    color: #432C01; 
    width:279px; 
    font-weight: bold; 
    font-size: 10px; 
    background:white; 
}

如何獲得的股利，爲組合框的高度擴大，同時仍保持在選項列表上/上方其他表單元素？

來源

2012-02-17 Nick

因爲我發現使用這種

EditorPanesWrapper

的TD內使大小固定，

嘗試，如果你想讓它調整的內容給予在％的特定寬度和高度你的頁面。

另一個問題，你爲什麼需要把它放在桌子上？你可以使用div

來源

2012-02-17 02:58:18 Bert

我使用的佈局只能使用表格完成，並且EditorPanesWrapper必須動態調整大小以使佈局工作。我需要一個不涉及改變屏幕布局的解決方案。 – Nick 2012-02-17 03:39:42

＃EditorPanesWrapper-去除'width：auto'和'overflow：auto'，然後加上'width：100％'和'height：100％'似乎解決了這個問題。有一些原因，我們有以前的設置，所以我會嘗試一段時間，看看是否有任何佈局錯誤出現。 – Nick 2012-02-17 18:32:17

將元素懸浮在其他元素上並將一些但不是全部元素向下推

回答

相關問題