css学习笔记8(定位)
发布时间:2023年12月25日
1.相对定位
1.1 如何设置相对定位?
- 给元素设置position:relative 即可实现相对定位。
- 可以使用left、right、top、bottom 四个属性调整位置。
1.2 相对定位的参考点在哪里?
1.3 相对定位的特点:
-
不会脱离文档流,元素位置的变化只是视觉效果上的变化,不会对其他元素产生任何影响。
-
定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
默认规则是:
- 定位的元素会盖在普通元素之上。
- 都发生定位的两个元素,后写的元素会盖在先写的元素之上。
-
left不能和right一起设置,top和bottom不能一起设置。
-
相对定位的元素,也能继续浮动,但不推荐这样做。
-
相对定位的元素,也能通过margin调整位置,但不推荐这样做。
注意:绝大多数情况下,相对定位会与绝对定位配合使用。
2.绝对定位
2.1 如何设置绝对定位?
- 给元素设置position:absolute 即可实现绝对定位。
- 可以使用left、right、top、bottom 四个属性调整位置。
2.2 绝对定位的参考点在哪里?
-
参考它的包含块。
什么是包含块?
- 对于没有脱离文档流的元素:父元素就是包含块;
- 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位,那包含块就是整个页面)。
2.3 绝对定位元素的特点?
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
- left不能和right一起设置,top和bottom不能一起设置。
- 绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
- 绝对定位的元素,也能通过margin调整位置,但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。
何为定位元素?——默认宽、高都被内容所撑开,且能自由设置宽高。
3.固定定位
3.1 如何设置固定定位?
- 给元素设置position:fixed 即可实现固定定位。
- 可以使用left、right、top、bottom 四个属性调整位置。
3.2 固定定位的参考点在哪里?
-
参考它的视口。
什么是视口?——对于PC浏览器来说,视口就是我们看网页的那扇“窗户”。
3.3 固定定位元素的特点
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
- left不能和right一起设置,top和bottom不能一起设置。
- 固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
- 固定定位的元素,也能通过margin调整位置,但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。
4.粘性定位
4.1 如何设置粘性定位?
- 给元素设置position:sticky 即可实现粘性定位。
- 可以使用left、right、top、bottom 四个属性调整位置,不过最常用的是top值。
4.2 粘性定位的参考点在哪里?
- 离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。
4.3 粘性定位元素的特点
- 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的是top值。
- 粘性定位和浮动可以同时设置,但不推荐这样做。
- 粘性定位的元素,也能通过margin调整位置,但不推荐这样做。
粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。
5.定位层级
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
- 如果位置发生重叠,默认情况是:后面的元素会显示在前面元素之上。
- 可以通过css属性z-index 调整元素的显示层级。
- z-index 的属性值是数字,没有单位,值越大显示层级越高。
- 只有定位的元素设置z-index 才有效。
- 如果z-index值大的元素,依然没有覆盖掉z-index值小的元素,那么请检查其包含块的层级。
6.定位的特殊应用
注意:
- 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设置宽高。
- 发生相对定位后,元素依然是之前的显示模式。
- 以下所说的特殊应用,只针对绝对定位和固定定位的元素,不包括相对定位的元素。
让定位元素的宽充满包含块
- 宽度想与包含块一致,可以给定位元素同时设置left和right为0。
- 高度想与包含块一致,可以给定位元素同时设置top和bottom为0。
让定位元素在包含块中居中
注意:该定位的元素必须设置宽高!
文章来源:https://blog.csdn.net/qq_42236791/article/details/135205566
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:chenni525@qq.com进行投诉反馈,一经查实,立即删除!