背景

项目要求站点首页放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/,转载请注明。

Drupal 7 建站学习手记(五):QuickTabs模块内的元素无法溢出的问题的更多相关文章

  1. Drupal 7 建站学习手记(四):怎样改动Nivo Slider模块的宽高

    背景 Nivo Slider模块默认大小是用的height: 100%, width 100%, 但IE7及下面的浏览器是不支持百分比宽高的, 而我的项目目标用户基本都是使用XP系统,项目需求是必须兼 ...

  2. 建站随手记:about server stack

    建站需要,随手记: Server Stack: ----------- 标准的mezzanine的Stack设置 前端:Nginx wsgi:gunicorn cms tool: mezzanine ...

  3. 建站随手记:installation python virtualenv mezzanine -1

    aliyun的网络访问有时会有问题,pip有问题的时候使用豆瓣源 pip install $apptoinstall$ -i http://pypi.douban.com/simple ------- ...

  4. 黄聪:WordPress 多站点建站教程(五):获取子站点用户信息(通过输入站点ID号来获取该站点的所有用户)

    得到站点ID为1的用户 <ul> <?php $blogusers = get_users('blog_id=1'); foreach ($blogusers as $user) { ...

  5. Python学习(五)函数 —— 内置函数 lambda filter map reduce

    Python 内置函数 lambda.filter.map.reduce Python 内置了一些比较特殊且实用的函数,使用这些能使你的代码简洁而易读. 下面对 Python 的 lambda.fil ...

  6. Selenium2学习(五)-- SeleniumBuilder辅助定位元素

    前言 福利来了,对于用火狐浏览器的小伙伴们,你还在为定位元素而烦恼嘛? 上古神器Selenium Builder来啦,哪里不会点哪里,妈妈再也不用担心我的定位元素问题啦!(但是也不是万能,基本上都能覆 ...

  7. python学习笔记五:模块和包

    一.模块用import导入 cal.py: #!/usr/bin/python def add(x,y): return x+y if __name__ == '__main__': print ad ...

  8. 学习Spring-Data-Jpa(五)---可嵌入对象和元素集合的使用

    1.场景一:地址信息(省.市.县.详细地址)在很多实体中都需要,比如说作者有地址,订单也有地址,但是他们的地址并不能独立与他们存在,所以地址不能映射为实体,那么我们就需要在作者实体和订单实体中都添加这 ...

  9. Githun&HEXO建站小记

    title: 建站小记 date: 2018-03-04 11:10:54 updated: 2018-03-06 12:00:00 tags: [hexo,next,建站,学习,前端技术,折腾,博客 ...

随机推荐

  1. Johnny Solving CodeForces - 1103C (构造,图论)

    大意: 无向图, 无重边自环, 每个点度数>=3, 要求完成下面任意一个任务 找一条结点数不少于n/k的简单路径 找k个简单环, 每个环结点数小于n/k, 且不为3的倍数, 且每个环有一个特殊点 ...

  2. Servlet 与 CGI 的比较

    和CGI程序一样,Servlet可以响应用户的指令(提交一个FORM等等),也可以象CGI程序一样,收集用户表单的信息并给予动态反馈(简单的注册信息录入和检查错误).然而,Servlet的机制并不仅仅 ...

  3. SQL ltrim() 和 rtrim() 函数

    LTRIM删除起始空格后返回字符表达式. 语法LTRIM ( character_expression ) 参数character_expression 是字符或二进制数据表达式.character_ ...

  4. Asterisk——part 1

    Asterisk Russell Bryant Asterisk1 is an open source telephony applications platform distributed unde ...

  5. jenkins邮件配置----jenkins笔记(三)

    转载地址:https://www.cnblogs.com/sylvia-liu/p/4527390.html 前言 最近搭建Maven+Testng+jenkins的持续集成环境,希望最后实现自动邮件 ...

  6. jsp jsp_javabean

    javaBean的定义 JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方法暴露 ...

  7. CF 459A && 459B && 459C && 459D && 459E

    http://codeforces.com/contest/459 A题 Pashmak and Garden 化简化简水题,都告诉平行坐标轴了,数据还出了对角线,后面两个点坐标给的范围也不错 #in ...

  8. [需要补充]javaEE中servlet方法service与doXXX的关系

    刚开始很模糊他们的关系,不清楚 service protected void service(HttpServletRequest req, HttpServletResponse resp) thr ...

  9. 第三视角团队:项目UML设计(团队)

    项目UML设计(团队) 团队信息 团队名:第三视角 各成员学号及姓名 姓名 学号 博客链接 张扬(组长) 031602345 http://www.cnblogs.com/sxZhangYang/p/ ...

  10. 【DevExpress v17.2新功能预告】DevExpress ASP.NET Scheduler新的自适应功能

    自适应Web设计可以帮助您解决各种尺寸的屏幕问题,网站的自适应网页设计可帮助您解决用户使用不同大小屏幕显示数据的问题. 在v17.2中,我们最大化了ASP.NET Scheduler的视图和可视化元素 ...