web前端的恐怖之旅（8）：定位

position 定位类型属性

---

1. 相对定位：position:relative;

   相对于未定位前的位置进行定位

   1. 不会改变原来元素的特性
   2. 支持top，left，bottom，right四个方位值
   • 支持文档流，会占着茅坑不拉屎，相当于灵魂出窍，肉体还在
   • 层级未设置时，后来者飘在之前的上面

2. 绝对定位：position:absolute;

   相对于 定位了的就近的祖先元素（给父级一个position:relative; ，就会以父级来定位）

   1. 脱离文档流，在文案流内不占位置

   2. 支持top，left，bottom，right，参照与祖先内容区域定位

   3. 不设置定位值时，top：auto；绝对定位元素会飘在原来的位置的上空，并且在文档流里占位置

   4. 层级未设置时，后来者还是会盖在他身上

   5. 会改变绝对元素的特性，绝对定位元素特性

      1. 能够支持宽高

      2. 不占位置

      3. 由内容撑开宽高，但是宽度不会超过定位父级的临界点

         ！绝对定位元素，一定要给固定宽

      4. margin，padding支持，但是不支持margin auto

   总结：

   ​ 绝对定位：用来改变元素位置，用于元素出现在另一个元素的上面

   ​ 相对定位：1，是用来稍微移动一点点的

   ​ 2，配合绝对定位来使用

   ​ 3，用来变成定位元素，使元素支持层级

3. 固定定位：position:fixed;

   相对于浏览器窗口定位

   特性：和 绝对定位

   ​ 1，支持宽高

   ​ 2，不占位置，脱离文档流

   ​ 3，由内容撑开

   margin:-20px：给一个负值会往反方向跑

   /*一个元素怎么在另外一个元素里居中*/
   第一种：绝对定位	50%  并且margin-top 或者 left是自己本身宽高的一般
   div{
       position:relative;
       width:400px;
       height:400px
       border:1px solid green;
   }
   p{
       position:absolute;
       width:100px;
       height:100px;
       top:50%;
       left:50%;
       margin-top:-50px;
       margin-left:-50px;
       background-color:red;
   }
   第二种（骚操作）：
   div{
       position:relative;
       width:400px;
       height:400px;
       border:1px solid green;  
   }
   p{
       position:absolute;
       width:100px;
       height:100px;
       top:0;
       left:0;
       bottom:0;
       right:0;
       margin:auto;
       background-color:red;
   }
   

二，层级

---

1. z-inder:; :层级，只有定位元素才会有

   默认值：auto（只支持整数，不能和别的层级比，只会发生在兄弟元素之间）

   p{
   	z-inder:1;
       position:absolute;
   }
   span{
   	z-inder:2;
       position:absolute;
   }
   

三，box-shadow

---

1. h-shadow x轴的偏移量

2. v-shadow y轴的偏移量

3. blur 模糊半径

4. spread 模糊大小

5. color 颜色()

6. inset 内置阴影

7. outset 外置阴影

   复合写法：box-shadow:10px 10px 5px 3px red,...（可以叠加）