css基础 绝对定位 position:absolute 相对于document元素进行定位 (无定位的祖先元素)
2017-03-30 19:20
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 } 13 .box .divOne{ 14 width:200px; 15 height:200px; 16 background-color:burlywood; 17 position:absolute;/*绝对定位元素不占空间,层级要高于普通元素*/ 18 left:10px;/*相对于祖先定位元素,来进行的定位*/ 19 top:20px; 20 /* 21 divOne的祖先是box,然而box元素没有进行定位(没有position属性) 22 如果所有的父元素都没有定位,那么以浏览器为准进行定位 23 */ 24 } 25 .box .divTwo{ 26 width:200px; 27 height:200px; 28 background-color:aqua; 29 } 30 .box .divThree{ 31 width:200px; 32 height:200px; 33 background-color:cornflowerblue; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="box"> 39 <div class="divOne"></div> 40 <div class="divTwo"></div> 41 <div class="divThree"></div> 42 </div> 43 </body> 44 </html>
对比链接:
css基础 绝对定位 position:absolute 相对于定位的祖先元素进行定位
2018-02-07
修正博文中的错误。
正确的知识:无定位父元素,那么会以浏览器(document)进行对齐。
——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源。
如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。
相关文章推荐
- css基础 绝对定位 position:absolute 相对于document元素进行定位 (无定位的祖先元素)
- css基础 绝对定位 position:absolute 相对于定位的祖先元素进行定位
- css基础 绝对定位 position:absolute 相对于定位的祖先元素进行定位
- 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)定位系列(一)