css学习笔记之position
2017-07-21 15:25
393 查看
学习来源:
http://www.cnblogs.com/xiaohuochai/p/5312917.html
position的几个属性值:
四个偏移属性:
这4个偏移特性来描述元素4个边的放置位置,那么元素的高度和宽度将由这些偏移隐含确定,元素将会拉伸。
top描述了定位元素上外边界离其包含块的顶端有多远。
正值,会把定位元素的上外边距边界远离包含块上边界,负值,则会把定位元素的上外边距移到其包含块的顶端之上。
left描述了定位元素的左外边距边界距离其包含块左边界有多远。
正值远离包含块左边界, 负值则把定位元素的左外边距移到包含块左边界。
[注意]定位元素的边界是指定位元素margin外侧的边界;包含块的包含区域是指包含块border内侧的padding+content区域。
absolute定位
1.破坏性
元素绝对定位后,会脱离文档流,高宽都塌陷,float是高度塌陷。
若父级为块元素,父级不设置高度,则父级高度塌陷
(高度为子元素高度,但是脱离文档流则无高度,宽度默认为父级的100%),
若父级为行内元素,无内容,则父级高宽都将塌陷(内联元素内容撑开宽度)。
2.包裹性
元素绝对定位后,会为其后代元素建立一个包含块。
若父级为块元素,使内容可以撑开宽度。
若父级为行内元素,使支持宽高。
[注意]浮动的包含块会延伸,进而包含所有后代浮动元素,但绝对定位的包含块并不会包含后代的定位元素,只是作为后代定位元素的定位父级。
3.去浮动
元素绝对定位后,元素原来的浮动效果将失效。这两个属性是互斥的,浮动是干不过绝对定位的。
4.层级
定位元素之间有层级,默认后者高于前者,可以使用z-index改变层级。
relative定位
1.属性值
相对定位的数值型偏移属性是相对于自身的,但其百分比却是相对于包含块的。
百分比相对于包含块的高度(只是高度height,不包括纵向padding和border),left和right百分比相对于包含块的宽度(只是宽度width,不包括横向padding和border)
2.限制绝对定位
一般地,给绝对定位元素限制范围时,为其父级元素设置相对定位relative,因为相对定位元素不脱离文档流。
[注意]相对定位元素可以限制绝对定位,但不能限制固定定位,因为固定定位是相对于文档(视窗)定位的。
3.不会改变元素本身的特性。
fixed定位
特性同绝对定位,但始终相对于视窗偏移。
[注意]IE6-浏览器不支持。
全屏遮罩
当页面内容超出页面容器大小出现滚动条时,此时使用absolute全屏遮罩会出现滚动条以外部分没有遮住的情况。绝对定位相对于文档偏移,文档的高度和可视区域一致,也就是与视窗一致,是不包括滚动条以外部分的。
这时,只能使用fixed固定定位来实现全屏遮罩效果。
http://www.cnblogs.com/xiaohuochai/p/5312917.html
position的几个属性值:
static | 默认值。没有定位,出现在正常文档流中 |
absolute | 绝对定位,相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于初始包含块document |
relative | 相对定位,相对于其正常位置进行定位 |
fixed | 绝对定位,相对于浏览器窗口进行定位 |
脱离文档流:
除 static relative属性值之外,absolute fixed都会使元素脱离文档流(float也会导致元素脱离文档流)。定位后的默认位置:
Fixed和absolute属性后的默认位置都是在原地,只是紧跟后面折正常文档流元素会顶上来,被定位元素盖住。四个偏移属性:
这4个偏移特性来描述元素4个边的放置位置,那么元素的高度和宽度将由这些偏移隐含确定,元素将会拉伸。
top描述了定位元素上外边界离其包含块的顶端有多远。
正值,会把定位元素的上外边距边界远离包含块上边界,负值,则会把定位元素的上外边距移到其包含块的顶端之上。
left描述了定位元素的左外边距边界距离其包含块左边界有多远。
正值远离包含块左边界, 负值则把定位元素的左外边距移到包含块左边界。
[注意]定位元素的边界是指定位元素margin外侧的边界;包含块的包含区域是指包含块border内侧的padding+content区域。
absolute定位
1.破坏性
元素绝对定位后,会脱离文档流,高宽都塌陷,float是高度塌陷。
若父级为块元素,父级不设置高度,则父级高度塌陷
(高度为子元素高度,但是脱离文档流则无高度,宽度默认为父级的100%),
若父级为行内元素,无内容,则父级高宽都将塌陷(内联元素内容撑开宽度)。
2.包裹性
元素绝对定位后,会为其后代元素建立一个包含块。
若父级为块元素,使内容可以撑开宽度。
若父级为行内元素,使支持宽高。
[注意]浮动的包含块会延伸,进而包含所有后代浮动元素,但绝对定位的包含块并不会包含后代的定位元素,只是作为后代定位元素的定位父级。
3.去浮动
元素绝对定位后,元素原来的浮动效果将失效。这两个属性是互斥的,浮动是干不过绝对定位的。
4.层级
定位元素之间有层级,默认后者高于前者,可以使用z-index改变层级。
relative定位
1.属性值
相对定位的数值型偏移属性是相对于自身的,但其百分比却是相对于包含块的。
百分比相对于包含块的高度(只是高度height,不包括纵向padding和border),left和right百分比相对于包含块的宽度(只是宽度width,不包括横向padding和border)
2.限制绝对定位
一般地,给绝对定位元素限制范围时,为其父级元素设置相对定位relative,因为相对定位元素不脱离文档流。
[注意]相对定位元素可以限制绝对定位,但不能限制固定定位,因为固定定位是相对于文档(视窗)定位的。
3.不会改变元素本身的特性。
fixed定位
特性同绝对定位,但始终相对于视窗偏移。
[注意]IE6-浏览器不支持。
全屏遮罩
当页面内容超出页面容器大小出现滚动条时,此时使用absolute全屏遮罩会出现滚动条以外部分没有遮住的情况。绝对定位相对于文档偏移,文档的高度和可视区域一致,也就是与视窗一致,是不包括滚动条以外部分的。
这时,只能使用fixed固定定位来实现全屏遮罩效果。
相关文章推荐
- CSS学习笔记之position定位
- CSS学习笔记——定位position属性的学习
- CSS学习笔记----position简单举例
- css学习笔记之background-position
- css 学习笔记 position float block 的理解
- css布局学习笔记之position属性
- CSS学习笔记-position
- CSS学习笔记-position定位(九)
- CSS布局学习笔记之position
- CSS学习笔记——定位position属性的学习
- css学习笔记
- css布局-学习笔记
- CSS学习笔记
- python学习笔记-Day14 -css基础知识-part2
- 前端学习笔记7 CSS为文本添加样式
- CSS学习笔记10 相对定位,绝对定位与固定定位
- HTML+CSS学习笔记(二)
- CSS学习笔记:渐变
- CSS-学习笔记五
- Metro UI CSS 学习笔记之 基础组件