web前端的恐怖之旅（8）：定位-优快云博客

本文详细解析了CSS中的三种定位方式：相对定位、绝对定位和固定定位的特点及应用场景。介绍了如何通过这些定位方式调整元素的位置，包括如何实现元素的居中显示，并讨论了层级控制和阴影效果的设置。

position 定位类型属性

相对定位：position:relative; （不会改变元素特性，可以用来辅助绝对定位）

相对于未定位前的位置进行定位
1. 不会改变原来元素的特性
2. 支持top，left，bottom，right四个方位值
3. 支持文档流，会占着茅坑不拉屎，相当于灵魂出窍，肉体还在
4. 层级未设置时，后来者飘在之前的上面
绝对定位：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. 用来变成定位元素，使元素支持层级

固定定位：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;
}

二，层级

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

默认值：auto（只支持整数，不能和别的层级比，只会发生在兄弟元素之间）
```
p{
	z-inder:1;
    position:absolute;
}
span{
	z-inder:2;
    position:absolute;
}
```