通常,为了让DIV子元素超出部分隐藏,都是在父元素设置overflow:hidden,这样即可防止子元素撑开父元素,使子元素能够溢出隐藏!
但是,对于position:absolute定位的子元素,仅仅使用overflow:hidden没办法将其溢出部分隐藏,需要在父元素上也加上一个定位position:relative;才能将含有 position:absolute属性的子元素进行溢出隐藏!
效果:
代码:
- <style>
- .box{
- width:200px;
- height:150px;
- overflow:hidden;
- border:2px solid #000;
- float:left;
- margin-right:20px;
- }
- .relative{
- position:relative;
- }
- .div{
- width:200px;
- height:100px;
- background:#FF5400;
- margin-top:100px;
- position:absolute;
- }
- .zi{
- width:200px;
- height:300px;
- background:#FF0000;
- }
- </style>
- <div class=“box”>
- 高300px的子元素溢出隐藏
- <div class=“zi”></div>
- </div>
- <div class=“box”>
- 不带relative
- <div class=“div”></div>
- </div>
- <br><br><br><br><br><br>
- <div class=“box relative”>
- 带上relative
- <div class=“div”></div>
- </div>
附:
1、CSS overflow属性,overflow 属性规定当内容溢出元素框时发生的事情,所有主流浏览器都支持 overflow 属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值:visible
hidden:内容会被修剪,并且其余内容是不可见的。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。
2、position属性,position 属性规定元素的定位类型。所有主流浏览器都支持 position 属性。任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值:static
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative:生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit:规定应该从父元素继承 position 属性的值。
CSS中Position:fixed偏移解决方案
一个很有趣的CSS3动画效果
JOS京东联盟API接口调用
淘点金href值
文章 26
评论 27
分类 839
标签 7
友链
百度广告
最近更新
- 01 微信小程序开发新版本检测、网络请求、json格式判断封装
- 02 利用Fiddler抓包工具下载微信视频号视频
- 03 整理了一张吴宗宪专辑无损CD《无尽的爱》APE格式音频
- 04 百度AI语音演示接口后获取的音频流处理
- 05 Win7 安装pr2018(AdobePremiereCC2018)记录说明
- 06 win7无法查看gif动画图解决插件Image_Viewer_for_Windows_7
- 07 win7 视频无法预览图片(文件夹内不显示略缩图)
- 08 微信小程序解决上滑多次加载重复内容的问题
- 09 图片处理软件Fireworks CS6
- 10 win10水星USB无线网卡创建移动热点,提示我们无法设置移动热点解决方案
评论功能已经关闭!