CSS僞元素由後續容器float屬性隱藏

標籤導航
標籤形式

的標籤導航欄有幾個環節，其在點擊將在第二列打開表格

我正在爲選項卡導航列中的每個鏈接設置一個工具提示，如下所示（.scss）

ul{ 
    .tooltip{ 
    // display: inline; 
    position: relative; 
    transition: all 0.5s ease-in; 
    &:hover:after{ 
     background: #333; 
     background: rgba(0,0,0,.8); 
     border-radius: 5px; 
     bottom: -5px; 
     color: #fff; 
     content: attr(title); 
     // left: 140%; 
     padding: 5px 15px; 
     position: absolute; 
     z-index: 1; 
     width: auto; 
    } 
    &:hover:before{ 
     border: solid; 
     border-color: #333 transparent; 
     border-top: 6px solid transparent; 
     border-bottom: 6px solid transparent; 
     border-right: 6px solid #727272; 
     bottom: 5px; 
     content: ""; 
     left: 125%; 
     position: absolute; 
     z-index: 99; 
    } 
    } 
}

但是，工具提示看起來似乎隱藏在窗體容器中，儘管給了它們更高的z索引。

形式列不具有Z-index和具有float:left屬性集。

我如何將after元素放在表單列的頂部。

**編輯：它看來好像寬度由tabnav父的寬度**

的.tab-nav具有以下的CSS（使用波旁純）

.tab-nav { 
    @include span-columns(4); 
    max-height: 70vh; 
    overflow-y: auto; 
}

限制

謝謝，

來源

2016-09-22 Kannaj

這不是有效的CSS，您使用的是某種預編譯器？（薩斯，少等等）如果是這樣，值得在問題和標籤中指出。 – DBS

哎呀..是的..我正在使用scss – Kannaj

您確定該元素位於表單列的後面嗎？你有沒有嘗試設置僞元素之前/之後的背景顏色？ –

.tooltip的一部分被隱藏，因爲它的父母有overflow-x: hidden 。

要麼設置position: absolute工具提示或overflow-x: visible爲.tab-nav

來源

2016-09-22 14:19:39 badew

這不幸似乎不工作:( – Kannaj

CSS僞元素由後續容器float屬性隱藏

回答

相關問題