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

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

2017-03-30 19:25 921 查看

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

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