/* 粘性定位 */
position: sticky;
属性值:static | relative | absolute | fixed | sticky
1、static
语法: 选择器 { position :static; }
位置:静态定位按照标准流摆放位置,它没有偏移量
2、relative
语法: 选择器 { position :relative; }
位置:是元素在移动位置时候,是相对于它原来的位置来说的
特点:
- 移动后, 不脱标,它的位置是保留的。
3、absolute
位置: 是元素在移动位置的时候,是相对于它祖先元素来说的
语法: 选择器 {position: absolute;}
特点:
-
如果没有祖先元素或者父元素没有定位,则以浏览器定位wei
-
如果祖父元素有定位(相对、绝对、固定定位),则以最近一级的带有定位祖先元素为参考点移动位置。
-
绝对定位不再占有原先的位置(脱标)
4、 fixed
位置:固定定位是元素固定于浏览器可视区的位置。
主要使用场景:可以在浏览器页面滚动时元素的位置不变
语法: 选择器 { position : fixed ;}
特点:
-
以浏览器的可视窗口为参照点移动元素,跟父元素没有任何元素,不随滚动条滚动
-
固定定位不占用原先的位置,也是脱标的,也是一种特殊的绝对定位
5、sticky
是相对定位和固定定位的混合
特点:
-
以浏览器的可视窗口为参照点移动元素
-
粘性定位占有原先的位置
-
必须有top、left、right、bottom 其中的一个才有效
举例:relative
HTML 代码如下(示例):
CSS 代码如下(实例):
- {
box-sizing: border-box;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
结果展示
含义:定位的盒子最终的位置
属性值:top bottom left right
============================================================================
选择器{ z-index: n;} 在使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用z-index来控制盒子的前后次序 (z轴),n可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上
注意:n后面不能加单位、只有定位的盒子才有z-index属性、n相同,则按照书写顺序、后来者居上
=====================================================================
注意
1、加了绝对定位的盒子不能通过margin:0 auto 水平居中
2、行内元素添加绝对或固定定位,可以直接设置高度和宽度
3、块级元素添加绝对或者固定定位,如果不给高度或者宽度,默认大小是内容的大小。
4、脱标的盒子不会触发外边距塌陷 浮动元素、绝对定位或固定元素的都不会触发外边距合并的问题
5、浮动元素和定位元素的区别:
1)、 绝对定位或固定定位会完全压住盒子,包含里面的文字
2)、 浮动元素不同,只会压住它占据它位置的盒子,但是不会压住下面标准流盒子里面的文字和图片
6、边偏移需要和定位模式联合使用,单独使用无效;top 和 bottom 不要同时使用;left 和 right 不要同时使用。
=======================================================================
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些简单的前端面试题以及学习路线给大家,狂戳这里即可免费领取
474801381)]
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
分享一些简单的前端面试题以及学习路线给大家,狂戳这里即可免费领取
[外链图片转存中…(img-DHjnrdcA-1713474801381)]