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>
相对层+绝对层的应用技巧:
>> 1、在页面中给某个元素(父级对象)设置相对定位，使其成为所包含的子级对象的定位参照物。
通常不设置其具体定位位置，保留其占据默认文档流空间的特性，不妨碍整体布局。
>> 2、相对层对象的内部，添加子级对象设置绝对定位，然后用相关定位属性控制其位置，以实现重叠或位移效果。
实际应用方案:
>>将relative相对层(父级)和absolute绝对层(子级)结合一起使用。实现某些栏目或板块中，内容元素的重叠或位移效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>定位层的应用演示</title> 6 <style> 7 *{margin:0;padding:0;} 8 ul li{list-style:none;} 9 10 .vedio-list{ 11 margin-top:200px; 12 } 13 .vedio-list li{ 14 width:270px; 15 position:relative; 16 float:left; 17 margin-left:10px; 18 } 19 .vedio-list li img{width:270px;} 20 .vedio-list li p{font-size:14px;line-height:20px;} 21 .vedio-list li i{ 22 background: url(./tag.png); 23 width:28px; 24 height:18px; 25 position:absolute; 26 top:5px; 27 right:5px; 28 } 29 30 .vedio-list li b{ 31 font-size:12px; 32 color:#fff; 33 background-color:#000; 34 padding:2px 4px; 35 position:absolute; 36 left:5px; 37 top:120px; 38 } 39 </style> 40 </head> 41 <body> 42 <ul class="vedio-list"> 43 <li> 44 <img src="./宫.jpg" alt=""> 45 <p>宫 泰国版</p> 46 <i></i> 47 <b>1080p</b> 48 </li> 49 50 <li> 51 <img src="./来自海洋的你.jpg" alt=""> 52 <p>来自海洋的你</p> 53 <i></i> 54 <b>1080p</b> 55 </li> 56 57 <li> 58 <img src="./扶摇.jpg" alt=""> 59 <p>扶摇</p> 60 <i></i> 61 <b>1080p</b> 62 </li> 63 64 <li> 65 <img src="./壮志高飞.jpg" alt=""> 66 <p>壮志高飞</p> 67 <i></i> 68 <b>1080p</b> 69 </li> 70 71 <li> 72 <img src="./重返二十岁.jpg" alt=""> 73 <p>重返二十岁</p> 74 <i></i> 75 <b>1080p</b> 76 </li> 77 </ul> 78 </body> 79 </html>