CSS基础--absolute与overflow

overflow对absolute元素的剪裁规则用一句话表述就是：绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。即如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行剪裁。
因此下面HTML中的图片不会被剪裁：

<div style="overflow: hidden;">
<img src="1.jpg" style="position: absolute;">
</div>

overflow元素父级是定位元素也不会剪裁，例如：

<div style="position: relative;">
<div style="overflow: hidden;">
<img src="1.jpg" style="position: absolute;">
</div>
</div>

但是，如果overflow属性所在的元素同时也是定位元素，里面的绝对定位元素会被剪裁：

<div style="overflow: hidden; position: relative;">  <img src="1.jpg" style="position: absolute;">
<!-- 剪裁 -->
</div>

如果overflow元素和绝对定位元素之间有定位元素，也会被剪裁：

<div style="overflow: hidden;">
<div style="position: relative;"> <img src="1.jpg" style="position: absolute;"> <!-- 剪裁 --> </div> </div>

如果overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高宽比overflow元素高宽还要大，也都不会出现滚动条。例如，下面的HTML和CSS代码：

<div class="box">  <img src="1.jpg"> </div>

.box {
width: 300px;
height: 100px;
background-color: #f0f3f9;
overflow: auto;
}
.box > img {
width: 256px;
height: 192px;
position: absolute;
}

图片高度256px比容器.box高度100px明显高出了一截，但是，没有滚动条出现。
那就是由于position:fixed固定定位元素的包含块是根元素，因此，除非是窗体滚动，否则上面讨论的所有overflow剪裁规则对固定定位都不适用。
以上特性作用一是解决实际问题。例如上一节最后“返回顶部”的案例，保证高度为0，同时里面的定位内容不会被剪裁，或者在局部滚动的容器中模拟近似position:fixed的效果。作用二是在遇到类似现象的时候知道问题所在，可以“对症下药”，快速解决问题。
随着CSS3新世界到来的冲击，规则在不经意间发生了一些变化，其中最明显的就是transform属性对overflow剪裁规则的影响。
overflow元素自身transform：
1）IE9及以上版本浏览器、Firefox和Safari（OS X、iOS）剪裁；
2）Chrome和Opera不剪裁。
overflow子元素transform：
1）IE9及以上版本浏览器、Firefox和Safari（OS X、iOS）剪裁；
2）Chrome和Opera剪裁。
可以看到overflow元素自身transform的时候，Chrome和Opera浏览器下的overflow剪裁是无效的，这是唯一和有定位属性时的overflow剪裁不一样的地方。

CSS基础--absolute与overflow相关推荐

和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
前端html,css基础总结
0.1.css引入界面的方式: 内联式:通过标签的style属性,在标签上直接写样式. <div style="width:100px; height:100px; backgroun ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网这里是 html4 的内容大标题小节一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
css无效 https_【CSS非全解02】CSS基础-文档流
基本概念文档流 mdn 块.内联.内联块? margin合并两种盒模型文档流 Normal Flow 流式布局 mdn 文档流动方向从左到右:"https://developer.m ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
CSS基础汇总——点击标题跳转详细博客【学习笔记】
CSS 网页的美容师理想中的结果: 结构(html)与样式(css)相分离 1.引入CSS样式表(书写位置) 行内式(内联样式) : <标签名 style="属性1:属性值1; 属性 ...

CSS基础--absolute与overflow

CSS基础--absolute与overflow相关推荐

最新文章

热门文章