关于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]

制作一个弹框效果:

(0)

相关推荐