【CSS】绝对定位和相对定位

时间：2022-05-11 03:48:03

html:定位层
　　特点:
　　　　>>完全脱离默认文档流，独立于立体层面的Z轴之上。
　　　　　　>>和float浮动一样都脱离了默认文档流，但float元素与默认文档流之间会相互产生影响，而定位层元素则完全独立，互不干扰
　　　　>>让元素inline-block化
　　　　　　>>例如一个div标签默认宽度是100%显示的，但是一旦变成absolute绝对定位，则默认独占一行的宽度就会变成自适应内部元素的宽度
　　　　　　>> 通常当我们将html元素设置成了定位层之后，就需要指定其宽度和高度。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>绝对定位和相对定位</title>

     <style>

         .position-div{

             background-color:#ff0;

             position:absolute;

         }

         .float-div{

             float: left;

             background-color: #8FE083;

         }

     </style>

 </head>

 <body>

 <div class="position-div">绝对定位div</div>

 <br><br><br><br><br><br>

     <div class="float-div">浮动div</div>

 </body>

 </html>

绝对定位和相对定位的区别:
　　　　>> absolute元素完全脱离默认文档流，不保留占位空间
　　　　>> relative元素完全脱离默认文档流，但仍然保留在默认文档流中的占位空间。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>绝对定位和相对定位</title>

     <style>

         .absolute{

             background-color:#ff0;

             position:absolute;

             width:50px;

             height:50px;

         }

         .relative{

             background-color:#ff0;

             position:relative;

             width:50px;

             height:50px;

         }

     </style>

 </head>

 <body>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <div class="absolute">绝对定位</div>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <hr color="red"/>

 <hr color="red"/>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <div class="relative">相对定位</div>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 <p>段落呀段落喂~~~</p>

 </body>

 </html>

相对层+绝对层的应用技巧:
　　>> 1、在页面中给某个元素(父级对象)设置相对定位，使其成为所包含的子级对象的定位参照物。
　　　　　　通常不设置其具体定位位置，保留其占据默认文档流空间的特性，不妨碍整体布局。
　　>> 2、相对层对象的内部，添加子级对象设置绝对定位，然后用相关定位属性控制其位置，以实现重叠或位移效果。

实际应用方案:
　　>>将relative相对层(父级)和absolute绝对层(子级)结合一起使用。实现某些栏目或板块中，内容元素的重叠或位移效果。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>定位层的应用演示</title>

     <style>

         *{margin:0;padding:0;}

         ul li{list-style:none;}

         .vedio-list{

             margin-top:200px;

         }

          .vedio-list li{

              width:270px;

              position:relative;

              float:left;

              margin-left:10px;

          }

             .vedio-list li img{width:270px;}

             .vedio-list li p{font-size:14px;line-height:20px;}

             .vedio-list li i{

                 background: url(./tag.png);

                 width:28px;

                 height:18px;

                 position:absolute;

                 top:5px;

                 right:5px;

             }

         .vedio-list li b{

                 font-size:12px;

                 color:#fff;

                 background-color:#000;

                 padding:2px 4px;

                 position:absolute;

                 left:5px;

                 top:120px;

         }

     </style>

 </head>

 <body>

     <ul class="vedio-list">

         <li>

             <img src="./宫.jpg" alt="">

             <p>宫 泰国版</p>

             <i></i>

             <b>1080p</b>

         </li>

         <li>

             <img src="./来自海洋的你.jpg" alt="">

             <p>来自海洋的你</p>

             <i></i>

             <b>1080p</b>

         </li>

         <li>

             <img src="./扶摇.jpg" alt="">

             <p>扶摇</p>

             <i></i>

             <b>1080p</b>

         </li>

         <li>

             <img src="./壮志高飞.jpg" alt="">

             <p>壮志高飞</p>

             <i></i>

             <b>1080p</b>

         </li>

          <li>

             <img src="./重返二十岁.jpg" alt="">

             <p>重返二十岁</p>

             <i></i>

             <b>1080p</b>

         </li>

     </ul>

 </body>

 </html>

相关文章