css基础 绝对定位 position:absolute 相对于定位的祖先元素进行定位
2017-03-30 19:25
686 查看
镇场诗:
清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————
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 left:10px;/*相对于祖先定位元素,来进行的定位*/ 20 top:-10px;/*负值,这个的效果是什么呢?*/ 21 /* 22 divOne的祖先是box,然而box元素进行定位(有position属性) 23 所以,divOne会以box元素为坐标轴,进行定位 24 */ 25 } 26 .box .divTwo{ 27 width:200px; 28 height:200px; 29 background-color:aqua; 30 } 31 .box .divThree{ 32 width:200px; 33 height:200px; 34 background-color:cornflowerblue; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="box"> 40 <div class="divOne"></div> 41 <div class="divTwo"></div> 42 <div class="divThree"></div> 43 </div> 44 </body> 45 </html>
对比链接:
css基础 绝对定位 position:absolute 相对于body元素进行定位 (无定位的祖先元素)
——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源。
如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。
相关文章推荐
- css基础 绝对定位 position:absolute 相对于定位的祖先元素进行定位
- css基础 绝对定位 position:absolute 相对于document元素进行定位 (无定位的祖先元素)
- css基础 绝对定位 position:absolute 相对于document元素进行定位 (无定位的祖先元素)
- CSS中position的absolute如何相对于父元素的位置进行定位
- css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))
- CSS中position的absolute如何相对于父元素的位置进行定位
- position的值, relative和absolute分别是相对于谁进行定位的? absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。 fi
- CSS中position的absolute如何相对于父元素的位置进行定位
- CSS中position的absolute如何相对于父元素的位置进行定位
- (转)css 相对定位 绝对定位 浮动 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”
- CSS 相对|绝对(relative/absolute)定位系列(一)
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
- css position 绝对定位和相对定位
- CSS 相对/绝对(relative/absolute)定位系列(四)
- 【随笔】关于绝对定位absolute相对于父元素定位的问题
- div+css基础——7.采用div定位技术对div进行排版(绝对定位,指定父容器)
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
- CSS 相对/绝对(relative/absolute)定位系列(二)
- 【CSS】absolute相对于已定位的父元素
- CSS 相对|绝对(relative/absolute)定位系列(一)