css_position详解
来源:互联网 发布:修改文件权限 linux 编辑:程序博客网 时间:2024/06/04 23:59
css_position详解
1.position的属性值
相对于它在正常流中的默认位置偏移。 1.相对于它在正常流中的默认位置进行偏移;
2.原位置依然占据文档流空间。
3.不会改变元素类型(块元素、行内元素、行内块元素) 1.适合于移动较小的偏移;
2.原位置空出来也不影响整体页面美观的布局(源于原位置依然占据文档空间的限制)
3.配合absolute进行定位 absolute 绝对定位。
相对于除static以外的第一个祖先元素进行定位。(直到向上查到html(chrome、firefox测试)为止) 1.相对于除static以外的第一个祖先元素进行定位。
2.会脱离文档流,不会占据页面空间;
3.将元素变成块元素 经常和relative配合使用,比如下拉菜单、提示信息,元素的特殊布局(叠加)等。 fixed 固定定位。
相对于浏览器窗口进行定位。 1.相对于浏览器窗口进行定位。
2.会脱离文档流,不会占据页面空间;
3.将元素变成块元素 1.广告信息;
2需固定在浏览器窗口某位置的操作按钮;
3.弹出框(登录框)的背景面板。
2.top、bottom、left、right
属性介绍:
top、right、bottom、left属性说明
top、bottom、left、right可能的值:
属性说明
1). 所有定位元素(static、absolute、relative、fixed)都有top等值,但是设置top等值只对absolute、relatvie、fixed有效!
2). static:static默认top等值为auto,给static元素设置top等值是无效的!
3). relative:如果原元素top和bottom值都为auto,则设置relative(不手动设置top、bottom值)后,top等值默认为0;如果其中之一为auto,则取另外一个值的相反数;如果都不是auto,bottom将取top的值的相反数。left的值始终等于right的值。
4). absolute:给元素仅仅设置了position:absolute; 效果是:这个元素变成了块元素(并体现它的特点,比如占一行、可设置width等);它脱离了文档流!!!;它的top等值并不会变化,还是原来的auto。(所以若不给position:absolute;的元素设置top等值,它的top等值是auto,位置不会发生变化)
5). fixed:同上absolute特点。
6). %是相对于父元素的值(这个值=padding值+内容的width/height)。
3.z-index
属性描述:设置元素的堆叠顺序。
属性说明:
1). 若不设置z-index,元素的z-index默认为auto。
2). 设置z-index只对absolute、relative、fixed有效,对static无效!!
3). absolute、relative、fixed的默认auto比static的默认auto要大,所以他们覆盖在static元素的上面。
4). 堆叠顺序的比较都是在同一层叠上下文内比较。
5). 层叠上下文的创建方式:
- 页面根元素天生具有层叠上下文,称之为“根层叠上下文”。
- z-index值为数值的定位元素的传统层叠上下文(不设置或者设置z-index:auto;的并不会产生层叠上下文)。
- 其他CSS3属性。
z-index参考资料:
- http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
- http://www.cnblogs.com/ForEvErNoME/p/3373641.html
- http://www.ituring.com.cn/article/68352
4.例子
4.1
4.1.1 html代码
<body> <div class="parent"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> </body>
4.1.2 css样式
.parent{ width:500px; height:500px; background:#f33; /*light red*/ margin:100px;}.parent>div{ height:100px;}.child1,.child2{ width:100px;}.child1{ background:#3f3; /*light green*/}.child2{ background:#33f;/*light blue*/}.child3{ width:200px; background:#ff6; /*light yellow*/}
4.1.3 显示效果
4.2
4.2.1 html代码
<body> <div class="parent"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> </body>
4.2.2 css样式
.parent{ width:500px; height:500px; background:#f33; /*light red*/ margin:100px;}.parent>div{ height:100px;}.child1,.child2{ width:100px;}.child1{ background:#3f3; /*light green*/}.child2{ background:#33f;/*light blue*/ position:absolute;}.child3{ width:200px; background:#ff6; /*light yellow*/}
4.2.3 显示效果
4.3
4.3.1 html代码
<body> <div class="parent"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> </body>
4.3.2 css样式
.parent{ width:500px; height:500px; background:#f33; /*light red*/ margin:100px;}.parent>div{ height:100px;}.child1,.child2{ width:100px;}.child1{ background:#3f3; /*light green*/}.child2{ background:#33f;/*light blue*/ position:absolute; top:0;}.child3{ width:200px; background:#ff6; /*light yellow*/}
4.2.3 显示效果
4.1和4.2对比:
4.1是最普通的普通流定位,无需多言。4.2中给.child2多设置了position:absolute,显示结果发生了改变,如图4.2.3,原因解释:给.child2元素设置absolute定位,使得①.child2元素变成了块元素(当然它本身就是块元素)②.child2元素脱离了文档流,不再占据页面空间。所以当.child2脱离文档流之后,后面的.child3就和.child1上下相邻了(因为child2脱离出去了!)。其次因为只给.child2设置了position:absolute,而并没有设置top、left等值,所以.child2的top、left等值默认是auto,所以它的位置不会改变。(这里top、left等值默认是auto,同时参考物也是未设置position:absolute时的参考物,而并不是设置了absolute之后的html作为参考物)。 又因为child2(absolute)的z-index也没有设置,默认为auto,child3(static)的z-index也是auto,但是absolute的auto值是优先于static的auto值的,所以child2会覆盖在child3上面(因为child2的width是100px,child3的width是200px,所以child2只是覆盖了部分的child3)。
4.2和4.3对比:
4.3比4.2多了一项css设置:给.child2多设置了top:0。.child2的定位是absolute定位,根据规则:absolute相对于除static以外的第一个祖先元素进行定位。(直到向上查到html(chrome、firefox测试)为止),由以上规则我们知道.child2的top、left等属性的参考物是根元素html,4.3中top设置为了0,就是相对于html根元素top为0,所以就紧贴在html上边缘;又因为4.3并没有设置left/right,所以left/right值默认为auto,所以他们的横向位置并不会发生改变。
- css_position详解
- css_position
- 详解
- 详解
- 详解
- 详解
- &,&&,|,||详解
- 详解
- Scala详解--------基础知识详解
- Spring详解-----------事务详解
- github 详解详解
- InputFilter详解、TextWatcher详解
- Spring详解-----------事务详解
- 【词汇详解】事务详解
- Session 详解
- Session 详解
- sizeof详解
- 端口详解
- windows常用命令
- 【ubuntu】virtualbox安装增强功能时【未能加载虚拟光盘】
- gdb和gdbserver的介绍与anzhuang
- Linux下/proc目录简介
- 微信小程序(1)—小程序注册
- css_position详解
- Photos的一些系统API(附上一个特别好用的照片选择器---swift版本)
- HDFS Federation
- 购物车逻辑
- adb手机刷机\adb 发广播
- spring工作原理
- 算法篇-14-A*算法解决八数码问题
- animation CSS3动画总结
- 微赞微擎模块400+,涵盖目前大多数功能模块,你值得拥有