CSS基础_03

定位：

元素的定位属性：

1，边偏移：

2，定位模式：

静态定位（static）：

它唯一的用途：取消别的定位方式！

因为定位是没有 position:none; 定位是通过 position:static;来取消的。

相对定位relative（自私）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color: purple;
11         }
12         .bottom{
13             background-color: darkred;
14         }
15         .top{
16             position: relative;
17             top: 100px;
18             left: 100px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="top"></div>
24     <div class="bottom"></div>
25 </body>
26 </html>

View Code

就是以自己的左上角为中心。

绝对定位(absolute)(拼爹)：

父级没有定位：

它是以我们的当前屏幕来对齐的，

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color: purple;
11         }
12         .father{
13             width: 210px;
14             height: 210px;
15             background-color: darkred;
16         }
17         .son{
18             /*当父亲没有定位时候*/
19             position: absolute;
20             bottom: 100px;
21             right: 100px;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="father">
27         <div class="son"></div>
28     </div>
29 </body>
30 </html>

View Code

父级有定位：

它是将元素依据最近的已经定位（绝对，固定或相对定位）的父元素（祖先）进行定位。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color: purple;
11         }
12         .father{
13             width: 300px;
14             height: 300px;
15             background-color: darkred;
16             position: absolute;
17             top:10px;
18             left: 10px;
19         }
20         .son{
21             /*父亲有定位时候*/
22             position: absolute;
23             bottom: 10px;
24             right: 10px;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="father">
30         <div class="son"></div>
31     </div>
32 </body>
33 </html>

View Code

子绝父相：

加了定位的盒子居中对齐：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color:darkred;
11             position: absolute;
12             /*下面是解决 在使用定位的时候仍然使居中*/
13             /*margin:auto auto;*/
14             left: 50%;
15             margin-left: -100px;
16 
17             top:50%;
18             margin-top: -100px;
19         }
20     </style>
21 </head>
22 <body>
23     <div></div>
24 </body>
25 </html>

View Code

固定定位：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color: darkred;
11             position:fixed;
12             left: 0;
13             top:100px;
14         }
15     </style>
16 </head>
17 <body>
18     <div></div>
19     <p>发生什科夫就看见地方撒</p>
20     <p>发生什科夫就看见地方撒</p>
21     <p>发生什科夫就看见地方撒</p>
22     <p>发生什科夫就看见地方撒</p>
23     <p>发生什科夫就看见地方撒</p>
24     <p>发生什科夫就看见地方撒</p>
25     <p>发生什科夫就看见地方撒</p>
26     <p>发生什科夫就看见地方撒</p>
27     <p>发生什科夫就看见地方撒</p>
28     <p>发生什科夫就看见地方撒</p>
29     <p>发生什科夫就看见地方撒</p>
30     <p>发生什科夫就看见地方撒</p>
31     <p>发生什科夫就看见地方撒</p>
32     <p>发生什科夫就看见地方撒</p>
33     <p>发生什科夫就看见地方撒</p>
34     <p>发生什科夫就看见地方撒</p>
35     <p>发生什科夫就看见地方撒</p>
36     <p>发生什科夫就看见地方撒</p>
37     <p>发生什科夫就看见地方撒</p>
38     <p>发生什科夫就看见地方撒</p>
39     <p>发生什科夫就看见地方撒</p>
40     <p>发生什科夫就看见地方撒</p>
41     <p>发生什科夫就看见地方撒</p>
42     <p>发生什科夫就看见地方撒</p>
43     <p>发生什科夫就看见地方撒</p>
44     <p>发生什科夫就看见地方撒</p>
45     <p>发生什科夫就看见地方撒</p>
46     <p>发生什科夫就看见地方撒</p>
47     <p>发生什科夫就看见地方撒</p>
48     <p>发生什科夫就看见地方撒</p>
49     <p>发生什科夫就看见地方撒</p>
50 </body>
51 </html>

View Code

总结：

相对定位是自私，绝对定位是拼爹，固定定位是只看浏览器。

元素模式转换：

总之就是如果发生位置变了的话，就会转变为行内块元素。这时，如果盒子本身没有宽度和高度的话，就是按里面的文本内容显示了。

叠放次序（z-index）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             position: absolute;  
12         }
13         .green{
14             background-color: green;
15             top: 50px;
16             left: 50px;
17         }
18         .blue{
19             background-color: blue;
20             top: 100px;
21             left: 100px;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="red"></div>
27     <div class="green"></div>
28     <div class="blue"></div>
29 </body>
30 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             position: absolute;
12         }
13         .red{
14             z-index: 1; /*可以把 red 给升上来 */
15         }
16         .green{
17             background-color: green;
18             top: 50px;
19             left: 50px;
20         }
21         .blue{
22             background-color: blue;
23             top: 100px;
24             left: 100px;
25         }
26     </style>
27 </head>
28 <body>
29     <div class="red"></div>
30     <div class="green"></div>
31     <div class="blue"></div>
32 </body>
33 </html>

View Code

总结：

另外附加的案例：

盒子只是普通定位时候：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             border:1px solid #ccc;
11             float: left;
12             margin-left: -1px;  /*这个可以消除 中间叠加造成的影响*/
13         }
14         div:hover{
15             border:1px solid #f40;
16             position: relative;   /*这个可以消除 只显示三个边框的问题  */
17         }
18 
19     </style>
20 </head>
21 <body>
22     <div></div>
23     <div></div>
24     <div></div>
25     <div></div>
26     <div></div>
27 </body>
28 </html>

View Code

每个盒子已经是相对定位了：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             border:1px solid #ccc;
11             float: left;
12             margin-left: -1px;
13             position: relative;
14         }
15         div:hover{
16             border:1px solid #f40;
17             z-index: 1;/*如果用相对定位解决不了  显示三个框的问题时，只好用 zindex 解决了*/
18         }
19 
20     </style>
21 </head>
22 <body>
23     <div></div>
24     <div></div>
25     <div></div>
26     <div></div>
27     <div></div>
28 </body>
29 </html>

此时的每个盒子已经都是相对定位了

相关阅读:
shell下如何删除文件的某一列
 git如何列出最简短的commit(tag和head名都不显示)
git如何列出每次提交对应有哪些文件被修改
 linux下如何使用命令行配置网络
 64bit ubuntu如何使能安装32bit软件
 linux下如何查看当前机器提供了哪些服务
 vi如何修改注释颜色
 uboot启动提示Error, wrong i2c adapter 0 max 0 possible后卡住了怎么办
 linux 如何改变文件属性与权限1
Linux文件系统只读Read-only file system的解决方法
原文地址：https://www.cnblogs.com/zach0812/p/11650846.html