Drupal 7 Build Station study notes (v): HTML Document Flow overflow problems

Source: Internet
Author: User
Tags drupal

Background

The project requires the homepage of the site to place views generated chunks, and requires 更多 links.

Views generated block default 更多 links can only be selected above and below the list

is the default at the top of the style map:


For the sake of aesthetics, I 更多 moved the link up a few pixels:

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


Problem

However, when I set up another block outside of this block,


(For example, I use a QuickTabs module here, which is actually a nested chunk)


This 更多 link doesn't show up:


Explore

The first reaction is the problem of Z-index, set the Z-index or not show


Google a bit, think it might be a position: relative problem


Add all of its parent div tags position: relative to the property and still not display


It's a myth.


After a long struggle, the target is finally locked on the parent div tag's overflow: hidden property.


Overflowthe definition of CSS properties:


value description
visible
hidden content will is trimmed, and the rest is invisible.
scroll content will is trimmed, but the browser displays scroll bars to see the rest of the content.
auto If the content is Trimmed, the browser displays scroll bars to see the rest of the content.
inherit regulations The value of the overflow property should be inherited from the parent element.

QuickTabsThe outer block of the module uses overflow: hidden attributes


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


It may be intended to disrupt the entire HTML document flow by not allowing the inner block to exceed the size of the outer block.


But my demand here is precisely to let the inner element "overflow".


Solve

QuickTabschange the outer chunk div element to the overflow: hidden visible line:

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


Problem Solving!


This article first http://www.dss886.com/drupal/2014/05/05/04/, reprint please specify.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.