3、元素的定位

用不同的定位方式，控制标签具体的显示位置。
position：static | relative | fixed | absolute;
static定位是默认值，即没有定位，遵循正常的文档流对象。

3.1 absolute绝对定位

基本语法：position：absolute；
功能：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于HTML。
例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>复仇者联盟</title>
  5. <meta charset="utf-8" />
  6. <style type="text/css">
  7.       /* 正文内容 */
  8.       .mainDiv{
  9.     width:900px;
  10.           height:500px;
  12.           background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png");
  13.           background-size:cover;
  15.           position:absolute;
  16.           left:50%;
  17.           top:50%;
  18.           transform:translate(-50%,-50%);
  19.       }
  20.     </style>
  21. </head>
  22. <body>
  24.     <!-- 正文内容 -->
  25. <div class="mainDiv">
  26.       <img src="http://www.yyfun001.com/res/htmlclassics/full/images/infinity.png" />
  27. </div>
  29. </body>
  30. </html>

效果图：
6.3 元素的定位 - 图1
代码讲解：
image.png

3.2 relative相对定位

基本语法：position：relative；
功能：相对定位元素的定位是相对其正常位置。
例题：

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
      /* 正文内容 */
      .mainDiv{
        width:900px;
          height:500px;
                   background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png");
          background-size:cover;

          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%,-50%);
      }
      .img1{
         position:relative;
           left:50%;
           top:50%;
           transform:translate(-50%,-50%);
      }
    </style>
</head>
<body>

    <!-- 正文内容 -->
<div class="mainDiv">
      <img class="img1" src="http://www.yyfun001.com/res/htmlclassics/full/images/infinity.png" />
</div>

</body>
</html>

效果图：
6.3 元素的定位 - 图3
代码讲解：
image.png

3.3 固定定位

基本语法：position：fixed；
功能：元素的位置相对于浏览器窗口是固定位置。
例题：

<!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">

      /* 右侧的浮动按扭 */
      .btn_list{
        position:fixed;
          right:50px;
          top:40%;
          transform:translatey(-50%);
      }
      .btn_list div{
        width:20px;
          height:20px;
          margin-top:10px;
          border-radius:50px;
          background-color:#3D3D3D;
          cursor:pointer;
      }
      #cur{
          background-color:#10508D;
      }
      /* 返回顶部 */
      .backtop{
          position:fixed;
          right:40px;
          bottom:50px;
          width:50px;
      }
</style>

</head>
<body>

    <!-- 右侧浮动按扭 -->
<div class="btn_list">
<div id="cur"></div>
<div></div>
<div></div>
<div></div>
</div>

    <!-- 返回顶部 -->
    <img class="backtop" src="http://www.yyfun001.com/res/htmlclassics/images/backtop.jpg" />

</body>
</html>

效果图
6.3 元素的定位 - 图5
代码讲解：
image.png

3.4 标签定位常用样式

单位 值 作用
position static | absolute | relative | fixed 设置标签定位方式
left auto | 长度 设置标签左边距
right auto | 长度 设置标签右边距
top auto | 长度 设置标签上边距
bottom auto | 长度 设置标签下边距
z-index auto | 数字 设置标签层叠顺序

3.5 z-index层叠等级属性

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在css中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居中。
注意：z-index属性仅对定位元素生效。