css的position属性

心已赠人 2021-08-19 14:17 495阅读 0赞

**目录**

一、position: static

二、position: relative

三、position: absolute

四、position: fixed

五，四个属性的综合运用

--------------------

参考：（强烈推荐下面这两篇文章，通俗易懂！！）

[https://www.cnblogs.com/zhuzhenwei918/p/6112034.html][https_www.cnblogs.com_zhuzhenwei918_p_6112034.html]

[https://blog.csdn.net/weixin\_42067967/article/details/80152403][https_blog.csdn.net_weixin_42067967_article_details_80152403]

### 一、position: static ###

MDN的描述：

> 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

注意：static是position的默认值。

<template>
      
        <div class="container">
          <div class="content">
          </div>
        </div>
     
    </template>
    <script>
    
    </script>
    <style>
      .container {
        background-color:#42B983;
        width: 100%;
        height: 300px;
      }
    
      .content {
        background-color: red;
        width: 100px;
        height: 100px;
        position: static;
        left: 10px;
        /* 这个left没有起作用 */
      }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

### 二、position: relative ###

MDN的描述：

> 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-\*-group, table-row, table-column, table-cell, table-caption 元素无效。

个人理解：相对于normal flow中的原位置来定位。

<template>
      <div class="container">
        <div class="content1"></div>
        <div class="content2"></div>
        <div class="content3"></div>
      </div>
    </template>
    <script>
    
    </script>
    <style>
      .container {
        background-color: #868686;
        width: 100%;
        height: 600px;
      }
    
      .content1 {
        background-color: yellow;
        height: 100px;
        width: 50px;
      }
      .content2{
        background-color: #2C3E50;
        height: 100px;
        width: 100px;
    
        position: relative;
      }
      .content3{
        background-color:#42B983;
        height: 100px;
        width: 200px;
      }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

然后加上：left: 30px;  top: 20px;如下

<template>
      <div class="container">
        <div class="content1"></div>
        <div class="content2"></div>
        <div class="content3"></div>
      </div>
    </template>
    <script>
    
    </script>
    <style>
      .container {
        background-color: #868686;
        width: 100%;
        height: 600px;
      }
    
      .content1 {
        background-color: yellow;
        height: 100px;
        width: 50px;
      }
      .content2{
        background-color: #2C3E50;
        height: 100px;
        width: 100px;
    
        position: relative;
        left: 30px;
        top: 20px;
      }
      .content3{
        background-color:#42B983;
        height: 100px;
        width: 200px;
      }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

### 三、position: absolute ###

MDN的描述

> 不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。

个人理解：生成绝对定位的元素。

<template>
      <div class="container">
        <div class="content">
        </div>
      </div>
    </template>
    <script>
    
    </script>
    <style>
      .container {
        background-color:#42B983;
        width: 100%;
        height: 150px;
    
        position: absolute;
        top:0;
        left:0;
      }
    
      .content {
        background-color: red;
        width: 100px;
        height: 100px;
    
        position: absolute;
        top: 10px;
        left: 30px;
      }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

当absolute和relative一起使用时，情况如下

<template>
      <div class="container">
        <div class="content1"></div>
        <div class="content2"></div>
      </div>
    </template>
    <script>
    
    </script>
    <style>
      .container {
        background-color:#42B983;
        width: 100%;
        height: 150px;
    
        position: absolute;
        top:0;
        left:0;
      }
    
      .content1 {
        background-color: red;
        width: 100px;
        height: 100px;
    
        position: absolute;
        top: 10px;
        left: 30px;
      }
      .content2 {
        background-color:yellow;
        width: 100px;
        height: 100px;
    
        position: relative;
        top: 0px;
        left: 100px;
      }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]

### 四、position: fixed ###

MDN的描述

> 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

个人理解：fixed相对于window固定，滚动浏览器窗口并不会使其移动。比如一些讨厌的广告，从右下角弹出来的那种，无论怎么滚动网页，这个广告的位置就是打死不动

<template>
      <div class="container">
        <div class="content1"></div>
        <div class="content2"></div>
        <div class="content3"></div>
        <div class="content4"></div>
    
      </div>
    </template>
    <script>
    
    </script>
    <style>
       .content1 {
         background-color:red;
         width: 100px;
         height: 100px;
    
         position: fixed;
         left:30px;
         top: 10px;
       }
       .content2 {
         background-color:orange;
         width: 100px;
         height: 100px;
    
         position: fixed;
         right:30px;
         top: 10px;
       }
       .content3 {
         background-color:yellow;
         width: 100px;
         height: 100px;
    
         position: fixed;
         left:30px;
         bottom: 10px;
       }
       .content4 {
         background-color:green;
         width: 100px;
         height: 100px;
    
         position: fixed;
         right:30px;
         bottom: 10px;
       }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

### 五，四个属性的综合运用 ###

注意体会这四个常用属性的用法，尤其是absolute和relative！！这个例子如果能够理清的话基本上就没多大问题了

<template>
      <div class="container">
        <div class="content1"></div>
        <div class="content2"></div>
        <div class="content3"></div>
        <div class="content4"></div>
        <div class="content5"></div>
        <div class="content6"></div>
        <div class="content7"></div>
        <div class="content8"></div>
      </div>
    </template>
    <script>
    
    </script>
    <style>
      .container {
        background-color:#42B983;
        width: 100%;
        height: 150px;
    
        position: absolute;
        top:0;
        left:0;
      }
    
      .content1 {
        background-color: red;
        width: 100px;
        height: 100px;
    
        position: relative;
        bottom: 10px;
        left: 30px;
      }
      .content2 {
        background-color:yellow;
        width: 100px;
        height: 100px;
      }
      .content3 {
        background-color:blue;
        width: 100px;
        height: 100px;
    
        position: absolute;
        top: 30px;
        left: 200px;
      }
      .content4 {
        background-color:orange;
        width: 100px;
        height: 100px;
    
        position: relative;
        top:30px;
        left: 10px;
      }
     .content5 {
        background-color:purple;
        width: 100px;
        height: 100px;
    
        position: static;
        top:30px;
        left: 10px;/* top和left属性会失效。因为官方定义,当position为static时,top、right、bottom、left 属性无效。 */
      }
      .content6 {
         background-color:black;
         width: 100px;
         height: 100px;
    
         left:30px;/* 此left属性会失效,因为没有position属性,所以position默认为static.官方定义,当position为static时,top、right、bottom、left 属性无效。 */
       }
       .content7 {
         background-color:gray;
         width: 100px;
         height: 100px;
    
         position: absolute;
         right:30px;
         bottom: 10px;
       }
       .content8 {
         background-color:skyblue;
         width: 100px;
         height: 100px;
    
         position: fixed;
         right:30px;
         bottom: 10px;
       }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

[https_www.cnblogs.com_zhuzhenwei918_p_6112034.html]: https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
[https_blog.csdn.net_weixin_42067967_article_details_80152403]: https://blog.csdn.net/weixin_42067967/article/details/80152403
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/00e661aa9f1f427094873d8d93462884.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/506f4711465a46409ca0872275679303.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/abdc13959e744b569a675a6244336021.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/0972607e1e3d4c31b3319971cf954e24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: /images/20210725/b6ad197949b347c9bbc09699233ca673.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/eaff6c2339b043b5bc43590c5d4d91b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/9971df8ec8f34359a00e4a46081a3ed2.png