您的位置：首页 > Web前端 > CSS

css基础绝对定位 position:absolute 相对于document元素进行定位 (无定位的祖先元素)

2017-03-30 19:20 1106 查看

镇场诗：
　　　　清心感悟智慧语，不着世间名与利。学水处下纳百川，舍尽贡高我慢意。
　　　　学有小成返哺根，愿铸一良心博客。诚心于此写经验，愿见文者得启发。
——————————————————————————————————————————

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 相对于document元素进行定位 (无定位的祖先元素)