HTML5元素定位

1.元素定位

为了实现网页团体结构，我们先要知道，一个元素，是怎样定位到页面上的某个位置的，这就是元素定位。
元素定位有四种，可以利用position样式来设置元素定位，以是此属性值有四种：

• static：静态定位（默认）。依据文档流定位。
  
• relative：相对定位。以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。
  
• absolute：绝对定位。以父元素为基准，设置坐标（left、top、right、bottom），脱离文档流。
  
• fixed：固定定位。以欣赏器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。
  

1.1.静态定位（文档流定位）

静态定位：默认。依据文档流定位。
特点：

• 将页面上的元素，按照html的誊写序次，从上到下，从左到右，依次分列。
  
• 内联元素不独占一行，块级元素独占一行。
  

2. <p>这是一个p标签</p>
3. <a href="">跳转百度</a>
4. <span>这是一个内联的span标签</span>
5. <ul>
6.     <li>html</li>
7.     <li>css</li>
8.     <li>javascript</li>
9. </ul>

复制代码

 
1.2.相对定位

相对定位：以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。
特点：

• 以自身为基准定位。
  
• 不脱离文档流。也就是说：相对定位元素仍然会被文档流中的别的元素所影响。
  
• 根据坐标定位到新位置之后，并不接纳原位置空间。
  

2. <style>
3.     .one{
4.         width: 200px;
5.         height: 100px;
6.         background-color: red;
7.         position: relative;
8.         left: 100px;
9.         top:50px;
10.     }
11. </style>
12. <p>这是一个p标签</p>
13. <p>这是一个p标签</p>
14. <p>这是一个p标签</p>
15. <div class="one"></div>

复制代码

 

1.3.绝对定位

绝对定位：以父元素为基准，设置坐标，脱离文档流。
特点：

• 脱离文档流。也就是说：绝对定位元素将不在被文档流中的别的元素所影响。
  
• 根据坐标定位到新位置之后，原位置空间会被接纳。
  
• 假如父元素也为relative或absolute定位，那么就以父元素为基准。
  
• 假如父元素不是relative定位，也不是absolute定位，那么划一以body为基准。
  

2. <style>
3.     .one{
4.         width: 200px;
5.         height: 100px;
6.         background-color: red;
7.         position: absolute;
8.         left: 100px;
9.         top:50px;
10.     }
11. </style>
12. <p>这是一个p标签</p>
13. <p>这是一个p标签</p>
14. <p>这是一个p标签</p>
15. <div class="one"></div>

复制代码

 

1.4.固定定位

固定定位：以欣赏器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。
特点：

• 元素始终固定在某个坐标位置，body以及body中的任何元素都不会对其产生任何影响。
  

2. <style>
3.     .one{
4.         width: 100%;
5.         height: 60px;
6.         background-color: red;
7.         position: fixed;
8.         left: 0;
9.         top:0;
10.     }
11. </style>
12. <div class="one">header</div>
13. <p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
14. <p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
15. <p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
16. <p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
17. <p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
18. <p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>

复制代码

1.5.元素定位总结

• 绝对定位不能有用扩展和维护。只能应用在某个局部。
  
• 相对定位只限定自身，只能应用在某个局部。
  
• 固定定位只限定自身，只能应用在某个局部。
  
• 以是在现实开发中，都利用文档流定位来举行页面结构，就是静态定位（默认）。它可以大概随着页面元素的厘革而自动调治。
  

1.6.z-index样式

绝对定位元素与固定定位元素脱离了文档流，可以把它想象为：此元素漂泊在网页上方。 那么，当这些元素位置有重叠时，就会出现：元素之间怎样覆盖的标题。此标题可以利用z-index样式来办理。
z-index样式的值是一个整形数，就表现元素所在的层级。

2. <style>
3.     .one{
4.         width: 200px;
5.         height: 200px;
6.         background-color: red;
7.         position: absolute;
8.         left: 0;
9.         top:0;
10.         z-index: 2;
11.     }
12.     .two{
13.         width: 200px;
14.         height: 200px;
15.         background-color: blue;
16.         position: absolute;
17.         left: 100px;
18.         top:100px;
19.         z-index: 1;
20.     }
21. </style>
22. <div class="one"></div>
23. <div class="two"></div>

复制代码