position属性详解(static|relative|absolute|fixed|sticky)

拼搏现实的明天。 2021-11-29 04:42 571阅读 0赞

**一、staic——自然定位/常规定位/静态定位**  
把它叫做定位中的一股清流，回归本真  
**1、作用**:是元素定位于常规/自然流中，即块、行垂直排列下去，行内元素水平从左到右  
**2、特点：**

*  **会忽略掉top、left、right、bottom或者z-index声明**

首先写如下样式：一个父容器里面右三个块

.container{
                border:1px solid black;
            }
            .container>div{
                width:100px;
                height:100px;
                line-height:100px;//文本垂直居中
                -moz-text-align:center;
                text-align: center;//文本水平居中
            }
            .box1{
                border:1px solid blue;
            }
            .box2{
                border:1px solid red;
            }
            .box3{
                border:1px solid blueviolet;
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]  
把块A设置如下样式：

.box1{
                border:1px solid blue;
                position:static;
                top:20px;
            }

结果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]  
没有发生任何变化。说明设置static的元素是不受top影响的，left、right、bottom也一样

*  **两个相邻的元素都设置了外边距，那么最终的外边距=两者外边距中最大的**

把A、B块的样式设置如下

.box1{
                border:1px solid blue;
                position:static;
                margin:20px 0;//设置上下边距20px,左右边距为0
            }
            .box2{
                border:1px solid red;
                position:static;
                margin:10px 0;//设置上下边距10px,左右边距为0
            }

结果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]  
可以看到相邻的A、B块之间的间距并没有叠加为30px,而是选择了之间比较大的20px

*  **具有固定的width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余宽度，造成的效果就是这个块水平居中**

把C块样式设置如下：

.box3{
                border:1px solid blueviolet;
                position:static;
                margin:auto;
            }

结果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]  
可以看到C块水平居中了

**二、relative——相对定位**  
**1、作用：** 使元素成为可定位的祖先元素，也就是说可以作为其它元素的一个参照物，一个标杆  
**2、特点**

*  可以使用top|left|right|bottom|z-index进行相对定位，偏移的位置都是相对于自身的
 *  相对定位的元素不会离开常规流，意思就是该元素偏移后但是它原来的位置还是会占着的，不会被其它元素覆盖
 *  任何元素都可以设置相对定位，它的绝对定位的后代就可以相对于它进行绝对定位
 *  可以使浮动元素发生偏移，并控制它们的堆叠顺序

（1）首先设置如下：都设置了浮动

.boxA{
                border:1px solid blue;
                float:left;
            }
            .boxB{
                border:1px solid red;
                float:left;
            }

![在这里插入图片描述][20190722172914447.png]  
（2）然后给B块设置如下：

.boxB{
                border:1px solid red;
                width:100px;
                height:100px;
                float:left;
                position:relative;
                left:-80px;
            }

![在这里插入图片描述][20190722173521321.png]  
（3）还可以用上z-index,给A、B加样式如下：

.boxA{
                border:1px solid blue;
                width:100px;
                height:100px;
                float:left;
                z-index:1;
            }
            .boxB{
                border:1px solid red;
                width:100px;
                height:100px;
                float:left;
                position:relative;
                left:-80px;
                z-index:-1;
            }

![在这里插入图片描述][20190722173911532.png]  
可以发现A块跑到了上面  
所以设置了relative属性后就可以使用left、top等偏移属性属性对元素进行定位

**三、absolute——绝对定位**  
**1、作用：** 使元素脱离文档流  
**2、特点：**

*  脱离常规流
 *  进行定位偏移时默认的是相对于body进行偏移，如果其父元素设置了relative属性，则就是相对于其父元素进行定位
 *  设置尺寸时要注意百分比是相对于谁的，是相对于最近的相对定位祖先元素
 *  用于块元素居中：给元素设置绝对定位后给它加上left:0、right:0以及margin:auto后它就会居中；同时没有给绝对定位块元素设置宽高时再给它设置left:0和right:0那么该元素就会继承它父元素得宽高将父元素填充

（1）首先设置如下样式：

.father{
              width:300px;
              height:300px;
              background-color:yellow;
          }
            .child {
                width:100px;
                height:100px;
                background-color: palegreen;
            }

效果图如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]  
（2）然后给子元素进行绝对定位并设置偏移以及给父元素设置相对定位

.father{
              width:300px;
              height:300px;
              background-color:yellow;
              position:relative;
          }
            .child {
                width: 100px;
                height: 100px;
                background-color: palegreen;
                position: absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 4]  
可以发现子元素居中了，所以这个方法可以固定用于块元素的居中  
（3）将子元素宽高不固定以后，给其设置left:0、right:0、top:0、bottom:0

.child {
                background-color: palegreen;
                position: absolute;
                left:0;
                right:0;
                top:0;
                bottom:0;
            }

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 5]  
可以发现子元素填充了父元素

**四、fixed——固定定位**  
**1、作用：** 使元素脱离文档流，固定于视口的某个位置  
**2、特点：**

*  固定元素不会随着视口的滚动而滚动
 *  继承了absolute的特点

**五、sticky——吸附定位|磁贴定位|粘性定位**  
**1、作用** ：relative+fixed的完美结合，制造出吸附效果  
**2、特点：**

*  如果产生偏移，原位置还是会在标准流中
 *  如果它的最近祖先元素有滚动，那么它的偏移尺寸就是相对于最近的祖先元素
 *  如果最近的祖先元素没有滚动，那么它的偏移尺寸是相对于视口
 *  上下左右的偏移原则（left、right、top、bottom）

<div class="logo">想象我是一张logo图</div>
      <div class="nav">《返回 | 首页 | 下载 | 收藏 | 分享 | 下一页》</div>
      <div class="content"><p>我是该页面的内容模块 我是该页面的内容模块</p>
          <p>我是该页面的内容模块 我是该页面的内容模块</p>
          <p>我是该页面的内容模块 我是该页面的内容模块</p>
          <p>我是该页面的内容模块 我是该页面的内容模块</p>
          <p>我是该页面的内容模块 我是该页面的内容模块</p>
          <p>我是该页面的内容模块 我是该页面的内容模块</p>
          <p>我是该页面的内容模块 我是该页面的内容模块</p>
      </div>

body{
                height:2000px;
            }
            .logo{
                width:100%;
                height:100px;
                background-color: rgba(255, 255, 0, 0.27);
            }
            .nav{
                width:100%;
                height:30px;
                background-color: rgba(128, 128, 128, 0.47);
                text-align:center;
                position:sticky;
                top:10px;
            }
            .content{
                width:100%;
                text-align:center;
                background-color: rgba(0, 0, 255, 0.18);
            }
            .content>p{
                margin:60px 0;
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20211129/496fad2dc0714360a905f7a22c9718fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 1]: /images/20211129/35e09cb7425142e6bddfda6ed9efa5d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 2]: /images/20211129/82894a5e1d8646b5acd817ddb63a0af4.png
[20190722172914447.png]: /images/20211129/7087d32866bc43c99b075452f8a1de34.png
[20190722173521321.png]: /images/20211129/4eb5f7e57dc34d8987667fd15902e9bd.png
[20190722173911532.png]: /images/20211129/8a0667873f7f453abb2bb23571ffb9d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 3]: /images/20211129/5da517547e284206b6bb524de06b9fb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 4]: /images/20211129/807e72c455fc4cea91cda799b2a7b4b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70 5]: /images/20211129/91c69cdc5c864624b9e53872c28d9fda.png