关于html元素的css--定位 / 开普饭

要理解定位，首先要了解文档流是什么。

文件流：指盒子按照html标签编写的顺序，从上到下，从左到右排列，块元素占一行，从左到右排列，每一行元素在一行中从左到右排列，先写的先，后写的排在后面，每个盒子都占据自己的位置。

位置可以使方框脱离文档流，就好比将元素分割成几层，没有位置的在一层，定位在没有定位的上面一层。

你可以用Z-index设置等级，Z-index越大，显示的就越向前。在创建网页弹框时，通常将其设置为最大。

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。

absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

static默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>元素的定位</title>
 <style>
  .con1,.con2,.con3,.con4,.con5{   border: 1px solid #000;   margin: 10px;   height: 400px;
  }  /* 这个div属于它下属div的父元素，如果没有设置浮动，当下属div设置absolute时，相对于body偏移*/
  .con3{   position: relative;
  }  .no_pos_1,.no_pos_2{   height: 100px;   width: 400px;   margin :10px;   font-size: 16px;
  }  .no_pos_1{   background-color: red;
  }  .no_pos_2{   background-color: gold;
  }  .relative_1,.relative_2{   height: 100px;   width: 400px;   margin-top :10px;   font-size: 16px;
  }  .relative_1{   background-color: red;   position: relative;   left: 50px;   top: 50px;
  }  .relative_2{   background-color: gold;
  }  .absolute_1,.absolute_2{   height: 100px;   width: 400px;   margin-top :10px;   font-size: 16px;
  }  .absolute_1{   background-color: red;   position: absolute;   left: 50px;   top: 50px;
  }  .absolute_2{   background-color: gold;
  }  .fixed_1,.fixed_2{   height: 100px;   width: 400px;   margin-top :10px;   font-size: 16px;
  }  .fixed_1{   background-color: red;   position: fixed;   left: 50%;   margin-left: -200px;  /* 设置水平垂直居中*/
   top: 50%;   margin-top: -50px;   z-index: 9999;   /*  弹框一般设置足够大的值 */
  }
   /* 弹框效果 */
  .mask{   position: fixed;   width: 100%;   height: 100%;   background-color: black;   opacity: 0.6;   /* 设置透明度 */
   z-index: 9998;   /* 一般比弹框设置的值小1*/
  }  .fixed_2{   background-color: gold;
  }  .static_1{   height: 100px;   width: 400px;   margin-top :10px;   background-color: gold;   position: static;
  }</style></head><body>
 <div class="mask">

 </div>
 <div class="con1">
  <div class="no_pos_1">
   没有使用定位  </div>

  <div class="no_pos_2">
   没有使用定位  </div>
 </div>
 <div class="con2">
  <div class="relative_1">
   relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移  </div>
  <div class="relative_2">

  </div>
 </div>
 <div class="con3">
  <div class="absolute_1">
   absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位  </div>
  <div class="absolute_2">

  </div>
 </div>
 <div class="con4">
  <div class="fixed_1">
   fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。  </div>

  <div class="fixed_2">

  </div>
 </div>
 <div class="con5">
  <div class="static_1">
   static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。  </div>
 </div></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143复制代码类型：[html]

制作一个弹框效果：

关于html元素的css--定位

相关推荐