[html5入门-16]position的几种定位区别
2016-10-06 02:08
435 查看
Html5中position的定位主要分为绝对定位,相对定位,静态定位,固定定位,继承父级定位,语法分别为position:absolute|relative|static|fixed|inhret,定位之后可以设置top,bottom,left,right四个属性值,其中优先级优先级:top>bottom,left>right,另外还有一个属性z-index:number;设置元素的堆叠顺序,数值越大,越在上面显示。
一.绝对定位
它是相对不是static最近一级父元素来进行定位的,被定位元素会脱离文档流,然后我们可以通过left,right,top,bottom来调整元素的位置
特点:
1.完全脱离文档流,
2.提升层级等级,
3.针对父级定位,如果父级没有定位,那就找父级上一级定位,如果父级上一级没有定位,最终以docment进行定位,
4.绝对定位一般配合相对定位使用,相对定位是父级,绝对定位是子级,
5.支持所有CSS样式,
6.提升定位元素层级的命令 z-index数字越大,越向上显示,
7.如果绝对定位的子集有浮动,可以不做清除浮动操作。
举例说明:
给父级div1设置了相对定位,子级div11就相对父级进行定位。
另外:
1.如果元素没有固定的width和height,却同时有top,left,right,bottom,那么该元素将占据除四条边距之外的所有空间;
2.如果元素没有固定的height和width,却同时有top.bottom,那么元素将横跨top和bottom之外剩余的所有高度;3.如果元素没有固定的width和height,却同时有left,right那么元素将横跨left和right之外剩余的所有宽度;
4.如果只设置了top,那么元素只会做垂直方向的移动,水平方向依然靠着父级的最左边。
二.相对定位
也就是相对于自己在文档流中的位置进行定位。
特点:
1.不脱离文档流,原有空间位置被保留,
2.针对自己本身位置进行定位,
3.不影响元素本身属性的设置
注意:
1.如果一个定位元素,同时设置了top和bottom,top的优先级更高,会显示top的值,
2.如果同时设置Left和right的值,优先级取决于网页语言,在英语网页中left的优先级更高,会显示left的值,在阿拉伯语言网页中right的优先级更高,
3.如果一个元素设置了相对定位(甚至是做了偏移),其他元素排版时参考的依然是那个原有位置(没有设置偏移前的位置),
4.如果一个元素设置了相对定位,它的原有位置空间被保留。即使该元素做偏移,其他元素也不会占据它原有的(偏移前)的位置。
举例说明
可见当pone通过相对定位转移到相对位置,后面的ptwo无法填充起留下位置,在实际中并不实用。
三.固定定位
是相对浏览器窗口(docment)进行定位的,同样也是脱离文档流,可以通过left,top,right,bottom来调整元素所在的位置。
特点:
1.一般用来做页面的导航部分与底部,
2.可以用来网页中插入广告和商业推广。
注意:在使用时候,尽量使用在页面的底部,因为即使脱离文档流也不会影响布局
四,几种定位简单比较总结
1.position:relative;不会脱离文档流
2.position:absolute|fixed;脱离文档流
3.absolute是相对于父级非static进行定位
4.fixed始终是相对于浏览器窗口进行定位
定位的用途:
1.图片的叠加
2,元素的垂直居中
3.布局位置的改变
4,广告植入
一.绝对定位
它是相对不是static最近一级父元素来进行定位的,被定位元素会脱离文档流,然后我们可以通过left,right,top,bottom来调整元素的位置
特点:
1.完全脱离文档流,
2.提升层级等级,
3.针对父级定位,如果父级没有定位,那就找父级上一级定位,如果父级上一级没有定位,最终以docment进行定位,
4.绝对定位一般配合相对定位使用,相对定位是父级,绝对定位是子级,
5.支持所有CSS样式,
6.提升定位元素层级的命令 z-index数字越大,越向上显示,
7.如果绝对定位的子集有浮动,可以不做清除浮动操作。
举例说明:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style type="text/css"> .div1{ width: 200px; height: 200px; background: aqua; position: relative; left: 50px; top: 50px; } .div11{ width:50px; height:50px; background:red; position:absolute; left:50px; top:50px; } </style> </head> <body> <div class="div1"> <div class="div11"></div> </div> </body> </html>
给父级div1设置了相对定位,子级div11就相对父级进行定位。
另外:
1.如果元素没有固定的width和height,却同时有top,left,right,bottom,那么该元素将占据除四条边距之外的所有空间;
2.如果元素没有固定的height和width,却同时有top.bottom,那么元素将横跨top和bottom之外剩余的所有高度;3.如果元素没有固定的width和height,却同时有left,right那么元素将横跨left和right之外剩余的所有宽度;
4.如果只设置了top,那么元素只会做垂直方向的移动,水平方向依然靠着父级的最左边。
二.相对定位
也就是相对于自己在文档流中的位置进行定位。
特点:
1.不脱离文档流,原有空间位置被保留,
2.针对自己本身位置进行定位,
3.不影响元素本身属性的设置
注意:
1.如果一个定位元素,同时设置了top和bottom,top的优先级更高,会显示top的值,
2.如果同时设置Left和right的值,优先级取决于网页语言,在英语网页中left的优先级更高,会显示left的值,在阿拉伯语言网页中right的优先级更高,
3.如果一个元素设置了相对定位(甚至是做了偏移),其他元素排版时参考的依然是那个原有位置(没有设置偏移前的位置),
4.如果一个元素设置了相对定位,它的原有位置空间被保留。即使该元素做偏移,其他元素也不会占据它原有的(偏移前)的位置。
举例说明
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img与background</title> <style type="text/css"> .img1{ width: 300px; height: 150px; border: 1px solid black; } .pone{ position: relative; left: 10px; top: -170px; } </style> </head> <body> <img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg" class="img1"/> <p class="pone">CSDN是全球最大的中文社区</p> <p class="ptwo">CSDN是全球最大的中文社区</p> </body> </html>
可见当pone通过相对定位转移到相对位置,后面的ptwo无法填充起留下位置,在实际中并不实用。
三.固定定位
是相对浏览器窗口(docment)进行定位的,同样也是脱离文档流,可以通过left,top,right,bottom来调整元素所在的位置。
特点:
1.一般用来做页面的导航部分与底部,
2.可以用来网页中插入广告和商业推广。
注意:在使用时候,尽量使用在页面的底部,因为即使脱离文档流也不会影响布局
四,几种定位简单比较总结
1.position:relative;不会脱离文档流
2.position:absolute|fixed;脱离文档流
3.absolute是相对于父级非static进行定位
4.fixed始终是相对于浏览器窗口进行定位
定位的用途:
1.图片的叠加
2,元素的垂直居中
3.布局位置的改变
4,广告植入
相关文章推荐
- HTML中Position属性的定位区别x
- html5 geolocation / 百度地图api Geolocation 定位当前城市信息&window.navigator.geolocation.getCurrentPosition,在IO
- css中的几种定位的区别
- CSS 各种定位(position)方式的区别
- css的position定位属性中值absolute与值fixed二者的区别
- 浮动(float)和定位(position)属性的区别和如何使用
- position 定位属性之absolute与fixed的区别
- html5-css:关于float,position的定位问题,文档流的解析
- CSS定位:几种类型的position定位的元素
- [html5入门-14]一探究竟“后代选择器与子选择器的区别”
- html5与html 4.01的区别 doctype几种分类及其不同
- [html5入门-21]Html中的几种布局简单比较
- CSS布局浮动(float)和定位(position)属性的区别和使用
- position几种定位方式
- [html5入门-19]伪类选择器与伪类元素的区别——看人家怎么说
- css position 几种定位
- CSS布局浮动(float)和定位(position)属性的区别和使用
- HTML5的getCurrentPosition() 地理定位,某些浏览器报错问题
- CSS中关于定位position的问题,blockquote,div,span三个的区别
- Div入门之div定位position,绝对定位absolute,相对定位relative