码迷,mamicode.com
首页 > 其他好文 > 详细

定位之相对定位

时间:2021-01-11 11:05:23      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:pos   height   z-index   ack   设置   oct   pre   round   相对   

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 /*
 8 相对定位特点
 9 1.不会离文档流 占位 所有后面的元素不会往前跑
10 2.可以设置上下左右四个方位
11 如果同的设置了top和bottom值只有top起作用
12 如果同时设置了1et和right值只有1eft起作用
13 3.参照物:自已本身
14 4.可以设置zinde属性z-ine越大越在上
15 z-index必须要和定位元素(绝对,相利,固定)同时使用才起作用
16 */
17 .red{
18 width: 300px;
19 height: 300px;
20 background-color: red
21 }
22 .green{
23 width: 200px;
24 height: 200px;
25 background-color: green;
26 
27 position: relative;
28 left: 50px;
29 top: 50px;
30 z-index: 10;
31 }
32 .blue{
33 width: 100px;
34 height: 100px;
35 background-color: blue;
36 position: relative;
37 z-index: 11;
38 }
39 </style>
40 </head>
41 <body>
42 <div class="red">
43 <div class="green"></div>
44 <div class="blue"></div>
45 </div>
46 </body>
47 </html>

定位之相对定位

标签:pos   height   z-index   ack   设置   oct   pre   round   相对   

原文地址:https://www.cnblogs.com/webaction/p/14251527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!