Drupal 7 建站學習手記（五）：QuickTabs模組內的元素無法溢出的問題

背景

項目要求網站首頁放Views產生的區塊，並且要求有更多連結。

Views產生的區塊預設的更多連結只能選在列表上方和下方

是預設在上方的樣式圖：

為了美觀，我將更多連結上移了若干個像素：

.more-link {  position: absolute;  top: 10px;  left: 390px;}

：

問題

然而，當我在這個區塊外面再套一層區塊時，

（比如我這裡用了QuickTabs模組，實際上是一個嵌套區塊）

這個更多連結怎麼都不顯示了：

探究

第一反應是z-index的問題，設了z-index還是不顯示

Google一下，覺得有可能是position: relative的問題

將其所有父div標籤全部加上position: relative屬性，仍然不顯示

真是百思不得其解

糾結了很久以後，最終將目標鎖定在了父div標籤的overflow: hidden屬性上

CSS Overflow屬性的定義：

值	描述
visible	預設值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其餘內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。
auto	如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

QuickTabs模組的外層區塊使用了overflow: hidden屬性

內層元素“溢出”時，內容被div修剪掉了。

它的本意可能是為了不讓內層的區塊超出外層區塊的大小，而打亂整個HTML文檔流。

但是我這裡的需求恰好就是要讓內層的元素“溢出”來。

解決

將QuickTabs外層區塊div元素的overflow: hidden改為visible就行了：

.block-quicktabs .content {  overflow: visible;}

：

問題解決！

本文首發http://www.dss886.com/drupal/2014/05/05/04/，轉載請註明。