display:none(将一个显示的元素进行隐藏）
display:block(讲一个隐藏的元素显示出来)
=========================================================================
position表示位置的意思，它主要是用于实现对元素的定位。
在CSS中定位分为三种：
-
position:fixed(固定定位)
-
position:relative(相对定位)
-
position:absolute(绝对定位)
left: 表示定位的元素离左边多远。
right: 表示定位的元素离右边多远。
top: 表示定位的元素离上边多远。
bottom: 表示定位的元素离下边多远。
1.固定定位
语法格式：
position:fixed
固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变。
特点：
-
固定定位元素它脱离了标准文档流。
-
固定定位元素的层级比标准文档流里面的元素要高，所以固定定位元素它会压盖住标准文档流里面的元素。
-
固定定位元素它不再占用空间。
-
固定定位元素它显示的位置不会随着浏览器的滚动而滚动。
案例一：使用固定定位来实现返回顶部的按钮。
效果图如下：
同样比较常见的有顶部的导航栏，也是这种方式做的：
- 网站栏目
- 网站栏目
- 网站栏目
- 网站栏目
- 网站栏目
- 网站栏目
- 网站栏目
- 网站栏目
- 网站栏目
- 网站栏目
-
2.相对定位
格式：
position:relative
相对定位它是相对于“原来的自己(也就是没有position这个属性之前的位置)”来进行定位。
例如：top 6px;意思就是向上移动6px就是不添加position的值。
特点：
-
相对定位元素它没有脱离标准文档流。
-
相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置。
-
相对定位元素的定位坐标值可以是负数。
-
相对元素它会将标准文档流的元素压盖住(就是移动到一定位置)。
test 最后
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
10万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
