【CSS】绝对定位和相对定位
html:定位层
特点:
>>完全脱离默认文档流，独立于立体层面的Z轴之上。
>>和float浮动一样都脱离了默认文档流，但float元素与默认文档流之间会相互产生影响，而定位层元素则完全独立，互不干扰
>>让元素inline-block化
>>例如一个div标签默认宽度是100%显示的，但是一旦变成absolute绝对定位，则默认独占一行的宽度就会变成自适应内部元素的宽度
>> 通常当我们将html元素设置成了定位层之后，就需要指定其宽度和高度。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>绝对定位和相对定位</title> 6 <style> 7 .position-div{ 8 background-color:#ff0; 9 position:absolute; 10 } 11 12 .float-div{ 13 float: left; 14 background-color: #8FE083; 15 } 16 </style> 17 </head> 18 <body> 19 20 <div class="position-div">绝对定位div</div> 21 <br><br><br><br><br><br> 22 <div class="float-div">浮动div</div> 23 </body> 24 </html>
绝对定位和相对定位的区别:
>> absolute元素完全脱离默认文档流，不保留占位空间
>> relative元素完全脱离默认文档流，但仍然保留在默认文档流中的占位空间。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>绝对定位和相对定位</title> 6 <style> 7 .absolute{ 8 background-color:#ff0; 9 position:absolute; 10 width:50px; 11 height:50px; 12 } 13 14 .relative{ 15 background-color:#ff0; 16 position:relative; 17 width:50px; 18 height:50px; 19 } 20 </style> 21 </head> 22 <body> 23 24 <p>段落呀段落喂~~~</p> 25 <p>段落呀段落喂~~~</p> 26 <p>段落呀段落喂~~~</p> 27 <p>段落呀段落喂~~~</p> 28 <p>段落呀段落喂~~~</p> 29 <div class="absolute">绝对定位</div> 30 <p>段落呀段落喂~~~</p> 31 <p>段落呀段落喂~~~</p> 32 <p>段落呀段落喂~~~</p> 33 <p>段落呀段落喂~~~</p> 34 <p>段落呀段落喂~~~</p> 35 36 <hr color="red"/> 37 <hr color="red"/> 38 <p>段落呀段落喂~~~</p> 39 <p>段落呀段落喂~~~</p> 40 <p>段落呀段落喂~~~</p> 41 <p>段落呀段落喂~~~</p> 42 <p>段落呀段落喂~~~</p> 43 <div class="relative">相对定位</div> 44 <p>段落呀段落喂~~~</p> 45 <p>段落呀段落喂~~~</p> 46 <p>段落呀段落喂~~~</p> 47 <p>段落呀段落喂~~~</p> 48 <p>段落呀段落喂~~~</p> 49 50 </body> 51 </html>