前端定位内容

最新推荐文章于 2024-07-20 18:16:53 发布

王欢欢~(¯▽¯~)

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量323

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/2302_79895666/article/details/139031424

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>定位</title>
       <style type="text/css">
           *{
               margin:0;
               padding:0:
           }
           .box{
               width: 200px;
               height: 200px;
               background-color: pink;
               position: relative;
               /* 绝对定位 */
               /* left左,right右,top上,bottom下 */
               left: 100px;
               /* bottom: 100px;
               top: 200px;
               right: 100px; */
           }
           /* .nbox{
               width: 300px;
               height: 300px;
               background-color: aqua;
               position: relative;
               top: 400px;
               right: 300px;
               left: 300px; */
               /* 1.绝对定位的元素移动时的参照点是祖先元素的位置
               2.如果没有祖先元素或祖先元素没有定位,则以浏览器为主
               3.如果祖先元素有定位(相对,绝对,固定),则以最近一级有定位元素作为参照点

               */
           /* } */
           .bigbox{
               width: 600px;
               height: 500px;
               border: 1px solid ;
               background-color: black;
           }
           .fbox{
               width: 400px;
               height: 300px;
               background-color:pink ;

           }
           .rbox{
               width: 200px;
               height: 100px;
               background-color:aqua;
           }
           .fixed{
               width: 50px;
               height: 200px;
               border: 1px solid #FF0000;
               /* 固定定位fixed */
               position: fixed;
               right: 0;
               top:300px;
           }
       </style>
   </head>
   <body>
       
       <div>
       <div class="bigbox">
       <div class="fbox">
       <div class="rbox">
       </div>
       <div class="fixed"></div>
   </body>
</html>