Drupal 7 website building learning note (5): Elements in the QuickTabs module cannot overflow

Background

The project requires that the website homepage contain the blocks generated by Views andMoreLink.

The default block generated by ViewsMoreThe link can only be selected at the top and bottom of the list.

Is the default style chart above:

For the sake of appearance, I willMoreThe link moved several pixels up:

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

:

Problem

However, when I build another block on the outside of this block,

(For example, I usedQuickTabsModule is actually a nested block)

ThisMoreWhy is the link not displayed:

Exploration

The first reaction is the z-index problem. If the z-index is set, it is not displayed.

Google, maybe it isposition: relativeProblems

Set all its parentdivAdd all tagsposition: relativeAttribute, still not displayed

It's hard to understand.

After a long tangle, the target was eventually locked to the parentdivLabeloverflow: hiddenAttribute

CSSOverflowAttribute definition:

Value	Description
Visible	Default value. The content will not be trimmed and will be displayed outside the element box.
Hidden	The content is trimmed and the rest is invisible.
Scroll	The content is trimmed, but the browser displays a scroll bar to view other content.
Auto	If the content is trimmed, the browser displays a scroll bar to view other content.
Inherit	Specifies that the overflow attribute value should be inherited from the parent element.

QuickTabsThe outer block of the module usesoverflow: hiddenAttribute

When the inner element "overflows", the content is trimmed by div.

It is intended to disrupt the entire HTML document stream to prevent the inner Block from exceeding the size of the outer block.

However, my requirement here is to "overflow" the inner element.

Solution

SetQuickTabsThe div element of the outer blockoverflow: hiddenChangevisibleJust do:

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

:

Solve the problem!

Please refer to the following link for more information: http://www.dss886.com/drupal/2014/05/05/04.