相对定位——relative

最新推荐文章于 2023-05-24 22:16:01 发布

转载最新推荐文章于 2023-05-24 22:16:01 发布 · 325 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/goodgirl----xiaomei/p/9769481.html

本文深入解析CSS中的定位属性，包括static、relative、absolute和fixed四种定位方式。详细解释了每种定位方式的特点，如元素如何相对于文档流定位，相对定位如何保留原有空间，以及绝对定位如何脱离文档流。同时，介绍了如何使用left、right、top和bottom属性进行精确偏移。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--
-定位：把指定的元素摆放在页面的任意位置(即：通过定位可以任意的摆放元素)

           -通过position属性设置元素的定位:
                 -可选值为：

static 默认值。元素没有开启定位。（忽略left、right、top、bottom、z-index）
                           relative 开启元素的相对定位。
                           absolute 开启元素的绝对定位。
                           fixed    开启元素的固定定位（也是绝对定位的一种）。
       -->
       <!--
            relative 相对定位:
            当元素的position属性设置为relative时，则开启了元素的相对定位。

relative的特性：
           1.开启了元素的相对定位以后，而不设置偏移量时，元素不发生任何变化。
            2.相对定位是相对于元素在文档流里原来的位置进行定位。
            3.相对定位的元素不会脱离文档流（即：虽然box2被放在小面，但是box3还在元素并未上去）
            4.相对定位会使一个元素提升一个层级（box2覆盖率box3[没有开启定位]一部分）
            5.相对定位不会改变元素的性质，块还是块，内联还是内联（它还是在文档流里的，所以并没变）
          -->
       <!--

           偏移量：
           当开启了一个元素的定位（即：position的属性值是一个非static的值）时
           可以通过left、right、top、bottom四个属性来设置元素的偏移量
           left:元素相对于定位位置的左侧偏移量
           right：。。。。。。。。。右侧偏移量
           top:。。。。。。。。。     上边的偏移量
           bottom：。。。。。。。     下边的偏移量

常识：
           通常偏移量只需要使用两个人就可以对一个元素进行定位了
           一般一个水平方向的一个偏移量和一个垂直方向的一个偏移量
        -->

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>postion</title>
       <style>
           .box1{
               width: 200px;
               height: 200px;
               background: red;
           }
           .box2{
               width: 200px;
               height: 200px;
               background: yellow;
               /*2.*/
               position: relative;
               left:100px;
               top:200px;
               /*1.
               * margin-left: 200px;
                   margin-top: 200px;*/
           }
           .box3{
               width: 200px;
               height: 200px;
               background: green;


               /*1.
               * margin-top: -200px;*/
           }
           .box4{
               width: 200px;
               height: 200px;
               background: papayawhip;
               position: relative;
               left:200px;
               bottom:200px;

               /*1.
               * margin-top: -200px;*/
           }
           .sp{
               width: 200px;
               height: 200px;
               background: cyan;
               position: relative;
           }
       </style>
   </head>
   <body>
       <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>
       <div class="box4"></div>
       <span class="sp">这是一个span</span>
   </body>
</html>

转载于:https://www.cnblogs.com/goodgirl----xiaomei/p/9769481.html