> 边偏移决定了改元素的最终位置;CSS中有top left right bottom四个属性;配合定位属性position使用
- 静态定位static
> 是元素的默认定位方式,按照标准流特性摆放位置,没有偏移
- 相对定位relative
>元素在移动时会以自己原来的位置移动; 原来在标准流中的位置还保留,后面的盒子以标准流对待它(不脱标)
- 绝对定位absolute
> 绝对定位是元素在移动位置的时候,是相对于它祖先元素移动;
> 如果没有祖先元素或祖先元素没有定位,则以浏览器为准对齐
> 如果祖先元素有定位,则以最近一级有定位的祖先元素为准移动位置;
> 觉得定位不占用原来标准流的位置,即脱标
- **子绝父相**:
>子元素是绝对定位, 父元素则需要是相对定位,因为相对定位会保留位置,而绝对定位不保留位置;
- 固定定位fixed
> 以浏览器的可视窗口为准移动元素
> 与父元素没有任何关系
> 不随着滚动条的滚动而滚动
> 不占用标准流的位置,是一种特殊的绝对定位
- 粘性定位 sticky
> 粘性定位可以被认为是相对定位和固定定位的混合
> 已可视窗口为参考点
> 占有标准流位置
> 必须要有left,top right bottom中的一个属性
- 定位总结;
![在这里插入图片描述](https://img-blog.csdnimg.cn/579ee88163ba4c43b586a52a441084c4.png)
- 定位布局的叠放顺序属性 z-index
>默认值auto,属性为数字,可以有负值,但没有单位
>当都没有z-index属性,按照属性叠放,后来居上
- 绝对定位盒子居中:
> left和top 设置 父元素宽度50%
> margin-left和margin-top设置自身元素宽度的一半
- 定位的特殊特性
> 行内元素添加定位,可以直接设置宽度和高度
> 块内元素添加定位,默认的是内容的高度和宽度
> 脱标的盒子不会触发外边距塌陷问题
- 浮动和定位的区别:
> 浮动会压住后面的盒子,不会压住盒子中的文字;(浮动最初的目的是为了做文字环绕效果的,文字会围绕着浮动元素)
> 绝对定位会压住标准流的盒子内容;
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。