1. 定位的组成
- 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式摆放盒子 - 定位 = 定位模式 + 边偏移 - 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置2. 定位模式
属性值 描述 static 静态定位 - 静态定位是元素的默认方式，即按照标准流来摆放，无定位的意思 relative 相对定位 - 相对定位是元素在移动位置的时候，是相对于它自身原来的位置而言的 absolute 绝对定位 - 绝对定位是元素在移动位置时，相对于它祖先元素作为参考系 fixed 固定定位 - 固定定位是元素固定于浏览器可视区的位置 sticky 粘性定位 - 粘性定位可以被认为是相对定位和固定定位的混合
3. 边偏移
边偏移量 示例 描述 top top:10px 顶部偏移量，定义元素相对于其父元素上边线的距离 bottom bottom:10px 底部偏移量，定义元素相对于其父元素下边线的距离 left left:10px 左部偏移量，定义元素相对于其父元素左边线的距离 right right:10px 右部偏移量，定义元素相对于其父元素右边线的距离
4. 静态定位
- 特点 · 按照标准流特性摆放位置，它没有边偏移 · 静态定位在布局上很少用到5. 相对定位 relative
- 特点 · 他是相对于自身原来位置相对移动的，以自身原来位置作为参考点 · 移动后，原来的位置依然保留，不会被其他盒子占据，后面的盒子不会向上移动到它原来的位置。即不脱标 1 <html>
2 <head>
3 <style type="text/css">
4 .box1{
5 background-color: red;
6 width:100px;
7 height:100px;
8 }
9 .box2{
10 background-color: yellow;
11 width:100px;
12 height:100px;
13 position: relative;
14 left: 50px;
15 }
16 .box3{
17 background-color: blue;
18 width:100px;
19 height:100px;
20 position: relative;
21 right: 50px;
22 }
23 </style>
24 </head>
25 <body>
26 <div class="box1">1</div>
27 <div class="box2">2</div>
28 <div class="box3">3</div>
29 </body>
30 </html>
View Code
6. 绝对定位 absolute
- 特点 · 元素在移动位置时，相对于它祖先元素作为参考系 · 如果没有祖先元素或者祖先元素没有使用定位，则以浏览器的document文档为参考系。 · 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考系移动位置。 · 绝对定位不再占有原先默认的位置。脱标 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>定位布局</title>
8 </head>
9 <body>
10 <div class="box">
11 <div id="div1">
12 <div id="div2"></div>
13 </div>
14 </div>
15 </body>
16 <style>
17 .box{
18 width: 300px;
19 height: 300px;
20 border: 2px solid black;
21 position:absolute;
22 top:0;
23 bottom:0;
24 left:0;
25 right:0;
26 margin:auto;
27 }
28 #div1{
29 width: 200px;
30 height: 200px;
31 background: red;
32 }
33 #div2{
34 width: 80%;
35 height: 80%;
36 /* 长宽为祖先元素 box 的80% */
37 background: cyan;
38 top: 20px;
39 left: 20px;
40 /* 以祖先元素为参考点，移动20px */
41 position: absolute;
42 }
43 </style>
44 </html>
View Code
7. 固定定位 fixed
- 特点 · 可以在浏览器页面滚动时元素的位置不会改变 · 以浏览器的可视窗口为参照系移动元素 · 跟父元素没有任何关系 · 不随滚动条滚动 · 固定定位不占有原先的位置