css基础 出现层叠的两个绝对定位元素 使用z-index属性设置层叠顺序
2017-03-30 19:30
761 查看
镇场诗:
清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————
result:
code:
——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源。
如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。
清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————
result:
code:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <style type="text/css"> 7 .box{ 8 width:600px; 9 height:2000px;/*这么高的话,就有滚动条了*/ 10 border:1px solid #ff006e; 11 margin:10px auto; 12 position:relative; 13 } 14 .box .divOne{ 15 width:200px; 16 height:200px; 17 background-color:burlywood; 18 position:absolute;/*绝对定位元素不占空间,层级要高于普通元素*/ 19 right:10px;/*相对于祖先定位元素,来进行的定位*/ 20 top:-10px; 21 z-index:200; 22 } 23 /* 24 divOne与divTwo的元素 都是绝对定位元素. 25 然后他们的坐标都是很相近的,会出现层叠的现象 26 可以通过设置z-index的值 来绝对层叠的顺序 27 */ 28 .box .divTwo{ 29 width:200px; 30 height:200px; 31 background-color:aqua; 32 position:absolute;/*绝对定位元素不占空间,层级要高于普通元素*/ 33 right:5px;/*相对于祖先定位元素,来进行的定位*/ 34 top:-5px; 35 z-index:100;/*堆叠顺序*/ 36 } 37 .box .divThree{ 38 width:200px; 39 height:200px; 40 background-color:cornflowerblue; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="box"> 46 <div class="divOne"></div> 47 <div class="divTwo"></div> 48 <div class="divThree"></div> 49 </div> 50 </body> 51 </html>
——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源。
如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。
相关文章推荐
- css基础 出现层叠的两个绝对定位元素 使用z-index属性设置层叠顺序
- javaScript--02 CSS基础 下 相对定位,绝对定位,顺序流,z-index,float
- (转)css 相对定位 绝对定位 浮动 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”
- CSS基础 设置top与left让两个div快出现重叠部分,并设置两者重叠的顺序
- 浅析CSS——元素重叠及position定位的z-index顺序
- css基础 绝对定位 position:absolute 相对于document元素进行定位 (无定位的祖先元素)
- CSS元素的层叠与z-index设置
- css基础 绝对定位 position:absolute 相对于定位的祖先元素进行定位
- CSS z-index 属性(设置元素的堆叠顺序)
- [CSS]使用绝对定位属性来实现CSS内部子容器高度随着外部父容器高度变化而变化
- 【CSS基础】绝对定位元素的水平居中 和 垂直居中
- 使用jQuery的".css()"和".attr()"方法设置元素"left"属性的注意点
- 浅析CSS——元素重叠及position定位的z-index顺序
- CSS基础学习10-CSS设置元素的定位
- 浅析CSS——元素重叠及position定位的z-index顺序
- 【原】谈谈css中关于元素定位的属性(positon&z-index)
- 浅析CSS——元素重叠及position定位的z-index顺序
- 深入解析CSS中z-index属性对层叠顺序的处理
- 【CSS基础】绝对定位元素的水平居中 和 垂直居中
- css基础 绝对定位 position:absolute 相对于document元素进行定位 (无定位的祖先元素)