CSS定位
为什么需要定位？
- 浮动可以让多个块级盒子没有缝隙的排列显示，经常用于横向排列盒子
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
定位定义
定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
定位模式
定位模式决定定位的方式，它通过css的position属性来设置，其值可以分为四个：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移
边偏移就是定位的盒子移动到最终的位置，有top,bottom,left,right四个属性。
如 top:80px ; --> 顶端偏移量，定位元素相对于其父元素的上边线的距离。
静态定位（static）
静态定位是元素的== 默认定位方式，无定位的意思==。
语法：
选择器{position:static;}
静态定位是按照标准流 特性摆放位置的，它没有边偏移
相对定位（relative）
相对定位是元素在移动位置的时候，== 相对于它原来的位置== 来说的（自恋型）
语法：
选择器{position:relative;}
相对定位的特点：
- 移动位置参照点是自己原来的位置
- 原来在标准流的位置继续占有。（不脱标，继续保留原来位置）
绝对定位（absolute）
绝对定位是元素再移动位置的时候，是相对于它祖先元素来说的（拼爹型）
语法：
选择器{position:absolute;}
绝对定位的特点：
- 如果没有祖先元素 或者祖先元素没有定位（static相当于没有定位），则以浏览器为准定位（Document文档）
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。(父亲没定位，爷爷有定位，则以爷爷为基准)
- 绝对定位会脱离标准文档流
eg:
<style>
.father {
position: static;
width: 500px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
bottom: 50px;
left: 50px;
width: 200px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
自绝父相：
子级是绝对定位的话，父级别要使用相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个位置，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时需要占有位置，保持标准文档流，所以父亲只能是相对定位
所以相对定位经常被用来做绝对定位的父级
当然，子绝父相不是永远不变的。如父元素不需要占有位置，子绝父绝也会遇到
固定定位 fixed （重要）
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器{position:fixed;}
固定定位的特点：
- 以浏览器的可视窗口为参照点进行移动
- 跟父元素没有任何关系
- 不随滚动条的滚动而滚动
- 固定定位不占有标准流的位置
固定定位小技巧：贴着版心，而不是贴着浏览器边缘对齐
1.让固定定位的盒子left:50%,走到浏览器可视区（版心）一半的位置。
2.让固定定位的盒子margin-left:版心宽度一般的距离
就可以让固定定位的盒子贴着版心右侧对齐了。
粘性定位 sticky
粘性定位可以被认为是相对定位和固定定位的混合
语法：
选择器{position:sticky;}
粘性定位的特点：
- 已浏览器的可视窗口为参照点移动元素（固定定位的特点）
- 粘性定位占有原先的位置（相对定位的特点）
- 必须添加top、left、bottom、right其中的一个才生效
跟页面滚动搭配使用，兼容性差，IE不支持
总结
定位叠放次序 z-index
在使用定位布局时，可能会出现盒子的重叠情况，此时，可以用z-index来控制盒子的前后次序（z轴）
语法：
选择器：{z-index：1； }
- 数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上。
- 如果属性值相同，则按照书写的顺序，后来者居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
定位的扩展
1.绝对定位的盒子居中
加了绝对定位的盒子不能通过margin：0，auto水平居中，但是可以通过以下计算方法实现水平居中和垂直居中。
实现方法：先left：50%，再margin-left :-(子盒子一半的宽度)。
2.定位特殊属性
绝对定位和固定定位也和浮动类似
1.行内元素添加绝对或者固定定位，可以直接设置宽度和高度。
2.块级元素添加绝对或者固定定位，如果不给高度和宽度，默认大小是内容的大小。
3.脱标的盒子不会触发外边距的合并问题
浮动元素、绝对、固定定位元素都不会触发外边距合并的问题
4.绝对定位或者固定定位会完全压住盒子
浮动元素不同，它只会压住下面标准流的盒子，不会压住下面标准流盒子里面的文字（图片）
绝对定位和固定定位则不同，他会压住下面标准流的所有内容。
浮动为什么不会压住文字？
因为浮动最初产生的目的，就是为了做文字环绕效果
元素的显示与隐藏
- display显示隐藏
- visibility显示隐藏
- overflow溢出显示隐藏
- display属性
display属性用于设置一个属性该如何显示
- display：none；隐藏对象（不再占有原来的位置，脱流。但是DOM结构还存在）
- display：block；除了转换为块级元素之外，同时还有显示元素的意思。
- visibility属性
- visibility：visible；元素可视
- visibility：hidden；元素隐藏 （隐藏后，继续占有原来的位置，不脱流，DOM也存在）
- overflow属性
- overflow：visible； 默认值，溢出显示
- overflow：scroll；显示滚动条（上下左右），不管溢出不溢出
- overflow：auto； 只有溢出才显示滚动条，不溢出不显示
对于有定位的盒子，要慎用隐藏功能
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
