position属性决定了元素将如何定位

并且通过top、right、bottom、left实现位置的改变 

position可选参数包含以下五个

static      默认值,表示元素按照标准流方式排列

relative   相对定位,使用了relative的元素,我们可以通过top、right、bottom、left实现变标准流内的定位

               后写的定位属性层级大于先写的定位属性层级

absolute  绝对定位,使用了relative的元素,我们可以通过top、right、bottom、left,元素将会脱离正常的文                   档流

fixed      固定定位,使用了relative的元素,我们可以通过top、right、bottom、left,元素将会脱离正常的文                   档流,不受制于标准流的限制,任何元素对于固定定位是没有约束力的,不受制于父元素

inherit    


relative

下面我们来了解一下relative

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css定位</title>
<style type="text/css">
       *{margin: 0;padding: 0;}
       .test1{width: 100px;
           height: 100px;
           background: red;
             }
       .test2{width: 100px;
           height: 100px;
           background: blue;
             }
    </style>
</head>
<body>
   <div class="test1"></div>
   <div class="test2"></div>

</body>
</html>

这是标准流下我们的div色块。现在我们给它加上relative属性看一下,首先我们假设一个xy轴,如下图

当我们使用relative属性的top、left、right、bottom的时候其实就等于我们的色块在这个平面上水平移动

具体的就是当我们使用top、left的时候,我们的元素是以上图为例经行平移,当我们使用right、bottom的时候,把xy轴反转即可,代码演示以及效果图如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css定位</title>
<style type="text/css">
       *{margin: 0;padding: 0;}
       .test1{width: 100px;
           height: 100px;
           background: red;
           position: relative;
           left: 100px;
           top: 300px;
             }
       .test2{width: 100px;
           height: 100px;
           background: blue;
           position: relative;
           right: 50px;
           bottom: 50px;

             }
    </style>
</head>
<body>
   <div class="test1"></div>
   <div class="test2"></div>
</body>
</html>


absolute

绝对定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css定位</title>
<style type="text/css">
            *{margin: 0;padding: 0;}
       .test1{width: 100px;
           height: 100px;
           background: red;
           position: absolute;
           left: 100px;
           top: 300px;
             }
       .test2{width: 100px;
           height: 100px;
           background: blue;
           position: absolute;
           left: 150px;
           top:  350px;

             }
    </style>
</head>
<body>
   <div class="test1"></div>
   <div class="test2"></div>
</body>
</html>

fixed

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css定位</title>
<style type="text/css">
            *{margin: 0;padding: 0;}
       .test1{width: 100px;
           height: 100px;
           background: red;
           position: absolute;
           left: 0px;
           top: 100px;
             }
       .test2{width: 100px;
           height: 100px;
           background: blue;
           position: fixed;
           left: 200px;
           top:  200px;

             }
    </style>
</head>
<body>
   <div class="test1">
    <div class="test2"></div>
   </div>
</body>
</html>

大家仔细观察,test2是子元素,但是它并没有受制于test1父元素

inherit

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css定位</title>
<style type="text/css">
        *{margin: 0;padding: 0;}
       .test1{width: 300px;
           height: 300px;
           background: red;
           position: relative;
             }
       .test2{width: 100px;
           height: 100px;
           background: blue;
           position: inherit;
           left: 100px;
           top: 100px;
             }
    </style>
</head>
<body>
   <div class="test1">
      <div class="test2"></div>
   </div>
</body>
</html>

z-index

可以设置元素的叠加顺序,但依赖定位属性

z-index大的元素会覆盖z-index小的元素

z-index为auto的元素不参与层级比较(auto默认值)

z-index为负值,元素被普通流中的元素覆盖

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css定位</title>
<style type="text/css">
            *{margin: 0;padding: 0;}
       .test1{width: 100px;
           height: 100px;
           background: red;
           position: relative;
           z-index: 1
             }
       .test2{width: 100px;
           height: 100px;
           background: blue;
           position: relative;
           top: -50px;
             }
    </style>
</head>
<body>
   <div class="test1"></div>
   <div class="test2"></div>
</body>
</html>

HTML 元素分类

块级元素,占一行

<di> <h1~h6> <ul> <ol> <li> <dl> <dt> <dd>等等

行内元素(内联元素),一行显示

<span> <a> <em> <img>等

display属性

inline

元素将显示为内联元素,元素前后没有换行符

block

元素将显示为块级元素,元素前后会带有换行符

inline-block

行内块元素,元素呈现为inline,具有block相应特性

none

此元素不会被显示

  1. 相应内联元素及使用display:inline设置成内联元素的元素width和height属性无效。水平方向margin-left/margin-right/padding-left/padding-right有效。垂直方向margin-top/margin-bottom/padding-top/padding-bottom/无效

  2. 块级元素及使用display:block设置成块级元素的元素width/height/margin/padding属性都生效