css四种定位

Posted 2021-06-02 小123654

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css四种定位相关的知识，希望对你有一定的参考价值。

浮动和定位的分别：

浮动目的是多个块级元素一行显示

定位主要是移动位置，让盒子移动到想要的位置上去

一、position：static

静态定位：对于边偏移无效的（left，top属性无效），一般用来清除定位，一个原来有定位的盒子，不想加定位了，就用这个

二、position：relative

相对定位：不脱离标准流，是相对盒子元素原有的位置进行偏移，设定垂直方向和水平方向，left,top,rigit,bottom，不会对其他元素产生影响

三、position：relative

相对定位：不脱离标准流，是相对盒子元素原有的位置进行偏移，设定垂直方向和水平方向，left,top,rigit,bottom，不会对其他元素产生影响，原来的位置继续占有

四、position：absolute

绝对定位：脱离标准流，如果父亲没有定位，以浏览器为基准进行定位；

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <style type="text/css">
 6         .father {
 7             width: 300px;
 8             height: 300px;
 9             background-color: pink;
10             margin: 100px;
11         }
12 
13         .son {
14             width: 100px;
15             height: 100px;
16             background-color: purple;
17             position: absolute;
18             top: 15px;
19             left: 15px;
20         }
21     </style>
22     <title></title>
23 </head>
24 <body>
25     <div class="father">
26         <div class="son">孩子跑走了</div>
27     </div>
28 
29 </body>
30 </html>

父亲有定位，以父亲为基准定位，一种relative，也可以是absolute；

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <style type="text/css">
 6         .father {
 7             width: 300px;
 8             height: 300px;
 9             background-color: pink;
10             margin: 100px;
11             position: relative;/*父亲有定位*/
12         }
13 
14         .son {
15             width: 100px;
16             height: 100px;
17             background-color: purple;
18             position: absolute;
19             top: 15px;
20             left: 15px;
21         }
22     </style>
23     <title></title>
24 </head>
25 <body>
26     <div class="father">
27         <div class="son">孩子跑走了</div>
28     </div>
29 
30 </body>
31 </html>