Z-index不在桌子內工作

我在桌子外面定位絕對div時出現問題，我不是桌子佈局的忠實粉絲，但是我發現了一個帶有桌子佈局的現有項目。代碼如下所示Z-index不在桌子內工作

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px"> 
        <table cellpadding="0" cellspacing="0" border="0"> 
         <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr> 
         <tr> 
          <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px"> 
           <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
            [--C--comp--C--] 
           </div> 
          </td> 
         </tr> 
         <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr> 
        </table> 
       </td>

其中「[--C - 補償 - C--]」是包含一個div內圖像的FCKEDITOR替換字符串，我已經設置div的Z-指數爲10，但它不想走出這張表。它的位置是絕對的。

請讓我知道我可能做錯了什麼。

我意識到問題出現在td容器上的溢出滾動，如果你刪除overflow-y:scroll它工作正常，但問題是我需要有溢出，因爲裏面有很多內容那td。我不知道現在該做什麼。 :(..有人請幫助一個兄弟了！

enter image description here

我需要的小地圖是表和大地圖留在表內的外，它顯示的小圖片，當你將鼠標懸停在大地圖使用jquery來縮放，這是加載在fckeditor上，我希望這有助於...

來源

2011-04-21 Dee-M

'z-index'與「走出一張桌子」無關，只有'position：absolute'。代碼中'position：absolute'在哪裏？順便說一句，你的HTML是無效的。 HTML像素長度不會得到'px'後綴。錯誤：'height =「500px」'。右：'height =「500」'。而你的CSS寬度和高度與HTML不一樣。不要同時使用這兩者，只有這一個或另一個。 – RoToRa 2011-04-21 13:40:09

感謝您的信息，但正如我所說我發現的代碼，因爲它是，但我一定會修復它。 – 2011-04-21 13:59:03

爲了z-index正常工作，每個具有z-index屬性的元素也必須有任何位置設置（例如位置：relative）。另外，我會爲表格分配一個位置和z-索引以供比較。

來源

2011-04-21 13:36:13 locrizak

非常感謝你！：D 你讓我的一天！ :-) – 2013-12-05 12:36:23

小修正：如果必須有位置設置，那麼服從z-index的元素。 **任何**值的作品，不只是相對的或絕對的。 – RedHatter 2017-09-06 19:52:09

非常有用的感謝。 – 2017-11-30 15:19:30

在說你想要到絕對定位的元素「走出桌子」，你的意思是你希望它位於桌子外面，而不是基於桌子的位置？或者你的意思是你想讓它位於桌子的內部，但是不夾在桌子的邊框上或與其他內容重疊？

如果是前者，我建議移動代碼中其他地方的絕對定位的DIV。爲什麼不把它放在桌子裏面？它只是使堆棧上下文和溢出屬性更難解決。

如果是後者，則可能需要調整或刪除包含絕對定位元素的div上的overflow-x和overflow-y屬性。可以想象，瀏覽器仍然會將溢出裁剪規則應用到子元素，即使它們是絕對定位的。

此外，請記住，z-index只意味着影響兄弟元素的堆疊順序。與樹相同級別的元素，換句話說，500px-height div內的其他元素將按照它們的z順序進行堆疊，但父節點和子節點將按照不同的規則進行播放。

如果這個答案沒有幫助，那麼也許我誤解了你想要做的事情。你可以發表一張關於它如何表現的圖片，並描述你的表現如何？在回答畫面

編輯被張貼：

我想你想在這種情況下，要做的就是讓小地圖滾動DIV之外莫名其妙。你可以改變這個...

<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
    [--C--comp--C--] 
</div>

...到這樣的事情？

[--C--compSmallMap--C--] <!-- Small map code goes here --> 
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
    [--C--compBigMap--C--] <!-- Big map code goes here --> 
</div>

如果沒有，你可以改變天色插入，使得它創建在代碼中更高層次的小地圖的代碼？例如，您可以使用document.getElementsByTagName("body")[0].appendChild(element);將元素添加到根節點（可能有比這更好的方法，只是一個示例）。使用它或類似的東西，你可能會把你的小地圖放在文檔樹中，這樣可以防止它被剪輯。

來源

2011-04-21 14:03:22

我已經發布了圖片，我希望它可以幫助，小地圖必須顯示在頁面頂部的表格之外，並且大地圖應該保留在表格中。 – 2011-04-21 14:16:00

@ Dee-M感謝您的形象。我已經爲我的回答添加了一個額外的建議。 – 2011-04-21 14:32:37

「z-index僅用於影響與樹相同級別的兄弟元素的堆疊順序」 - 這是不正確的;它會影響[堆疊上下文層次結構]內兄弟的堆疊順序（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context）。 – 2013-09-07 00:30:25

Z-index不在桌子內工作

回答

相關問題