試圖解決CSS側面重疊

我幾乎完成了我正在處理的一個非常大的文本項目，並且我需要解決我一直在推遲的問題：我使用的註釋偶爾會運行彼此重疊並重疊。如果您尋找ovoce a或Euripedes，您可以看到問題here。試圖解決CSS側面重疊

可能有很多不同的方法來解決這個問題。但我不知道從哪裏開始。任何建議或聰明的想法將非常受歡迎。謝謝！

編輯：我想再試一次。似乎工作的解決方案結果不是工作得很好！

2012-02-29 97847658

我搜索了卵子並找到了問題。上面的文字的旁註太長，所以它重疊。無論如何，您只需設置下方的文字並將其設置爲這樣的邊距即可？

style="margin-top: 60px;"

來源

2012-02-29 23:28:17

@肖恩·科克：我剛剛試了一下，它似乎工作！我想知道在我真正理解CSS之前我需要做多少CSS ...... – 97847658 2012-02-29 23:33:31

糟糕，它看起來像這種技術只是簡單地掃描下一個旁註，沒有任何企圖避免以前的旁註。你有沒有一種替代技術？謝謝。 – 97847658 2012-03-01 04:40:56

不幸的是，由於所有的註釋都使用'position：absolute'，所以瀏覽器無法確定它們是否重疊。 – approxiblue 2012-03-02 04:08:08

在您的HTML結構中，旁白與主文本屬於同一列。如果你拿走旁白的CSS，他們會出現在原來的位置，進一步推動主文本。 CSS將旁邊的東西推向左邊; position:absolute可以防止旁白在主文的列中佔用空間。該佈局嚴重依賴position:absolute。把財產拿出來，段落前面的所有編號僞元素也將被移除。

爲了在沒有絕對定位的情況下達到同樣的效果，您必須重寫很多代碼：或者引入一個4列（而不是2列）的表格並將旁註移動到它們自己的列，或切換到叢林漂浮的div s。歡迎來到CSS地獄。

我不知道你的項目的限制有多嚴格，但這裏有另一種方法。

.sidenote { 
    background-color: white; 
} 
.sidenote:hover { 
    z-index: 10; 
}

通過將background-color設置爲白色，旁白將是不透明的。如果它們重疊，則進一步向下覆蓋其上面的那個。一旦用戶懸停在旁邊，它將被帶到旁邊的旁邊。

來源

2012-03-02 05:57:47 approxiblue

試圖解決CSS側面重疊

回答

相關問題