CSS：overflow-y：scroll;溢出 - X：可見

請參閱以下職位的圖片突出我的問題和潛在的解決方案：CSS：overflow-y：scroll;溢出 - X：可見

CSS overflow-y:visible, overflow-x:scroll

然而，這種策略休息，當你真正移動滾動條。在建議的實現（position: fixed;）中，工具提示顯示在位置預滾動位置的子div旁邊。因此，當您將新的子div移動到視圖中時，工具提示開始從頁面底部掉下來。

在這裏看到的bug的演示：http://jsfiddle.net/narcV/4/

任何想法如何，我可以讓工具提示在任何時候旁邊的孩子DIV顯示？

2012-04-10 Chuck

這不是一個錯誤：'position：fixed'總是相對於視口定位一個元素，而不是定位到最近的'position：relative'容器。關於你鏈接到的問題有一些奇怪的問題：標題與給定的代碼不一致（它也* * overflow-y：scroll; overflow-x：visible'！），我不知道爲什麼自我回答說使用'position：fixed'。 – BoltClock 2012-04-10 05:57:14

是的;我認爲那篇文章的標題是一個錯字。我並不是說'position：fixed;'是壞的，而是在引用的帖子中的解決方案是錯誤的（因爲'position：fixed;'的行爲與你描述的完全一樣） – Chuck 2012-04-10 06:05:03

我結束了實施這一使用JavaScript，使用getPos功能從this question。

最終產品看起來像：

var scrollPanel = ...; 
var tooltip = ...; 
function nodeHovered(e) { 
    var hovered = e.srcElement; 
    var pos = getPos(hovered); 
    pos.x += hovered.offsetWidth; 
    pos.y -= scrollPanel.scrollTop; 
    tooltip.style.setProperty('left', pos.x); 
    tooltip.style.setProperty('top', pos.y); 
}

基本上，我計算在網頁上當前顯示的節點（考慮到滾動條的位置），並且手動放置工具提示中的正確的位置頁。

太糟糕了，沒有優雅/ CSS的方式來做到這一點，但至少這個工程。

來源

2012-04-11 18:19:41 Chuck

我想你應該使用position:absolute而不是position:fixed。

.parent { overflow-y:scroll; width:100%; height:100px; } 
.child { position:relative; } 
.child .child-menu { position: absolute; left: 80px;width:200px; top:0px; border: 1px solid black; background-color: green; display: none; } 
.child:hover .child-menu { display: block; }

小提琴演示， http://jsfiddle.net/68fBE/2/

來源

2012-04-10 06:08:43 Jashwant

不幸的是，我需要工具提示顯示在外面的主滾動窗格。因爲overflow-y設置爲滾動，所以絕對位置會被剪切。 – Chuck 2012-04-10 06:22:32

你的overflow-y是滾動的。它會隱藏你的工具提示。由於滾動具有最高的Z-索引。 – Jashwant 2012-04-10 06:59:47

這不完全正確;如果您查看我發佈的原始JSFiddle，工具提示可能會出現在滾動條前面，使用'position：fixed;'，但是使用'position：absolute;'將其裁剪到視口內，這完全是另一個問題。 – Chuck 2012-04-10 15:52:12

CSS：overflow-y：scroll;溢出 - X：可見

回答

相關問題