【CSS】定义元素的位置

CSS定义元素的位置
html元素的position属性，有4个属性值，分别是static、relative、fixed、absolute

static:
1、默认值，一般不显式设置为static
2、即使设置top、bottom、left、right，元素的位置不会发生改变
3、会随着页面滚动条移动
4、代码示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>position static</title>
 6     <style>
 7         .static{
 8             border: 2px solid red;
 9             /*position: static;  不管有没有这行代码，浏览器中看到的效果都一样，因为默认情况下，元素的position值就是static*/
10             width: 100px;
11             height: 100px;
12         }
13         .wh{
14             width: 100%;
15             height: 800px;
16             background-color: grey;
17         }
18     </style>
19 </head>
20 <body>
21     <h1>position static</h1>
22     <div class="static">
23         div元素的position：static
24     </div>
25     <div class="wh"></div>
26 </body>
27 </html>

View Code

relative:
1、元素相对于它原来的位置进行移动，移动的参考物就是浏览器默认给元素渲染出的那个位置
2、需要设置top、bottom、left、right，元素的位置才会移动
3、不设置top、bottom、left、right，则元素的位置不会移动。
4、left的值可正可负，为正，则元素位置往右边移动，为负，则往左边移动。right、top、bottom也一样，可正可负
5、元素移动后，原来的位置还存在文档流中，不会被其他元素填充上去。
6、会随着页面滚动条移动
7、代码示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>position relative</title>
 6     <style>
 7         .relative{
 8             border: 2px solid red;
 9             width: 300px;
10             height: 200px;
11             /*如果只设置position属性，而不设置top、bottom、left、right,则元素位置不会发生改变*/
12             position: relative;
13             top:15px;
14             left:100px;
15         }
16 
17         .wh{
18             width: 100%;
19             height: 800px;
20             background-color: grey;
21         }
22         p{
23             border: solid 1px blue;
24         }
25     </style>
26 </head>
27 <body>
28     <h1>relative</h1>
29     <div class="relative">
30         div element position:relative
31     </div>
32     <p>div位置移动后，p元素不会填充div元素移动前的那个位置</p>
33 
34     <div class="wh"></div>
35 </body>
36 </html>

View Code

fixed:
1、需要设置top、bottom、left、right，才会相对于它原来的位置进行移动，这点跟relative一样。
2、不设置top、bottom、left、right，则元素的位置不会移动。
3、元素在相对自己原来的位置移动后，页面滚动条滚动时，元素相对浏览器视图窗口的位置保持不变，即元素不会随着页面滚动条移动。
4、代码示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>position fixed</title>
 6     <style>
 7         .fixed{
 8             border: 2px solid blue;
 9             width: 200px;
10             height: 100px;
11             /*如果只设置postion，而不设置top、bottom、left、right,则元素的位置不会发生改变*/
12             position: fixed;
13             top:200px;
14             left: 200px;
15         }
16 
17         .wh{
18             width: 100%;
19             height: 800px;
20             background-color: grey;
21         }
22     </style>
23 </head>
24 <body>
25     <h1>fixed</h1>
26     <div class="fixed">
27         div element position:fixed
28     </div>
29     <div class="wh"></div>
30 </body>
31 </html>

View Code

absolute:
1、移动参考物，是它的上级指定了位置的一个元素，它的上级元素可以是父级，也可以是父级的父级。
2、它的上级元素必须指定了position属性的值为relative、fixed、absolute之一(static排除在外)
3、需要设置top、bottom、left、right，元素的位置才会移动
4、一般会搭配一个position属性为relative的父级元素使用
5、代码示例：

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

View Code