一、CSS 定位
CSS 定位 相关博客 :
- 【CSS】定位 ① ( CSS 三大盒子布局方式 | CSS 定位简介 | 边偏移 | 定位模式 )
- 【CSS】定位 ② ( 静态定位 | 相对定位 )
- 【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )
- 【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )
- 【CSS】定位 ⑤ ( 子元素绝对定位 父元素相对定位 | 代码示例 )
- 【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )
- 【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 边偏移 | 代码示例 )
- 【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
- 【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序 ( 多个盒子堆叠次序问题 | z-index 属性值简介 | 控制盒子堆叠次序 )
- 【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )
- 【CSS】使用 固定定位 实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )
- 【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
- 【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )
- 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )
1、盒子模型位置摆放三大机制 - 普通流 / 浮动 / 定位
CSS 三大盒子布局方式 :
- 普通流 : 又称为 标准流 , 盒子按照从上到下的顺序进行排列 ;
- 浮动 : 另多个盒子水平排成一列 ;
- 定位 : 将盒子定位在某个位置 ; 盒子自由漂浮在其它盒子之上 , 可以任意指定水平和垂直方向上的位置 ;
从层级上来说 , 普通流盒子 在最底层 , 浮动盒子 在中间层 , 定位盒子 在最上层 ;
2、CSS 定位简介
定位是将 盒子模型 定位到某个位置 , 并且自由地漂浮在其它盒子上方 ;
定位由 定位模式 边偏移 构成 ;
3、边偏移
边偏移 :
- 顶部偏移量 : 盒子模型 距离 父容器 上边线 的长度 , 如 :
top: 10px; - 底部偏移量 : 盒子模型 距离 父容器 下边线 的长度 , 如 :
bottom: 10px; - 左侧偏移量 : 盒子模型 距离 父容器 左边线 的长度 , 如 :
left: 10px; - 右侧偏移量 : 盒子模型 距离 父容器 右边线 的长度 , 如 :
right: 10px;
4、定位模式
定位模式 : CSS 中通过 position 属性设置定位模式 , 语法如下 :
选择器 {position: 定位模式属性值;}定位模式有如下几个设置选项 :
- 静态定位 :
static - 相对定位 :
relative - 绝对定位 :
absolute - 固定定位 :
fixed
5、静态定位
CSS 中的 静态定位 是 默认的定位方式 , 就是无定位 , 设置该定位方式 , 定位盒子不生效 ;
为盒子模型 设置 静态定位 模式 , 该 盒子模型 就会按照标准流的方式 摆放布局 , 没有任何 边偏移 的效果 ;
在 使用 定位 时 , 几乎不适用 静态定位 ;
6、相对定位
相对定位 是 盒子模型 相对于 其在 标准流中的位置 设置的 ;
如 : 盒子模型 在标准流 中 , 原来的位置是 (0 , 0) , 设置了相对定位 , 就是 相对于原来的位置 (0, 0) 进行 边偏移 后的位置 ;
下面的示例中 , 盒子模型的初始位置是 在浏览器的 左上角 ( 0 , 0 ) 位置 , 此时设置相对定位 , 并设置边偏移 ,
使用 margin 也可以实现盒子放置在 ( 100, 100 ) 位置上 , 但是无法设置其浮动在其它盒子上方 ;
7、绝对定位
绝对定位 是以 父级元素 为基准 , 设置 边偏移 ;
为 子元素 添加 绝对定位 ,
- 如果 父容器有定位 , 则相对于父容器的坐标进行定位 ;
- 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位 ;
- 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ;
上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是 相对定位 ;
为父容器添加了相对定位 , 子容器也会相对于 父容器 进行定位 ;
7、绝对定位特点
绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ;
如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ;
绝对定位 元素 不保留 原来的位置 , 是完全脱离 标准流 的 ( 脱标 ) ;
这里与相对定位进行对比 , 相对定位 是相对于 盒子在普通流模式下的位置 进行设置的 ;
相对定位 是 不脱标 ( 脱离标准流 ) 的 , 原来的位置还会进行保留 ;
8、子绝父相 - 子元素绝对定位 父元素相对定位
绝对定位 要和 带有定位 的 父容器 搭配使用 ;
子元素 使用绝对定位 , 父元素要使用 相对定位 ;
子元素使用 绝对定位 , 在布局中不会保留其位置 ,
子元素完全依赖 父容器 的位置 ,
此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 ,
而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性 ;
父级元素 需要 占位 , 必须使用 相对定位 ;
子元素 需要 任意摆放 , 必须使用绝对定位 ;
9、固定定位概念语法
固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;
固定定位 完全脱离 标准流 , 不占用 布局中的位置 , 漂浮在任何元素上方 ;
固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 边偏移 " 进行定位 ;
- 固定定位 与 父元素没有任何关系 ;
- 固定定位 与 滚动条滚动没有任何关系 ;
固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ;
注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ;
固定定位 的 本质是一种 特殊的绝对定位 ;
固定定位语法 :
代码语言：javascript复制选择器 {
position: fixed;
left: 0px;
top: 0px;
}固定定位元素举例说明 : 在下面的网站 , 顶部的导航栏 , 与 右侧的 三个按钮 , 就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素的位置 ;
低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ;
10、绝对定位元素设置 水平 / 垂直 居中
绝对定位 不能通过 设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;
相对定位 的 盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin: auto; 样式的方式 令盒子水平居中 ;
举例说明 : 绝对定位 的元素 需要居中对齐的地方很多 , 如下图所示 , 右侧的 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中的 五个小圆点 的容器需要居中对齐 ;
1、设置固定尺寸
使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素 水平 / 垂直 居中 ;
2、先偏移50%再回退固定值
父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ;
先设置 50% 的 宽度 / 高度 偏移量 , 然后再往回退 盒子一半 宽度 / 高度 的偏移量 ;
以 水平居中为例 : 200 x 200 大小的盒子 , 通过设置
- 首先 , 设置 left 左边偏移为 50% , 让子元素的左侧 移动到 父容器水平中心位置 ;
left: 50%;
- 然后 , 设置 负数的 左外边距 , 令 子元素 向左移动 自身 宽度的一半 , 需要提前测量 子元素的宽度 ;
margin-left: -100px;
11、多个盒子堆叠次序问题
在 网页布局 中 , 如果 多个盒子都设置 绝对定位 , 那么这些盒子会堆叠在一起 ;
设置了定位样式的盒子会压住标准流盒子 , 如果有多个设置定位的盒子 , 后面的盒子会压住前面的盒子 ;
下面的代码中 , 三个盒子都设置了绝对定位 , 先设置了蓝色盒子 , 然后设置了 红色盒子 , 最后设置了 紫色盒子 ;
最终展现出来的样式是 紫色盒子 压住了 红色盒子 , 红色盒子压住了 蓝色盒子 ;
代码示例 :
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠次序</title>
<style>
.one,
.two,
.three {
/* 为 3 个元素 设置 绝对定位 */
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
}
.two {
/* 绝对定位 上边偏移 50 像素 */
top: 50px;
/* 绝对定位 左边偏移 50 像素 */
left: 50px;
background-color: red;
}
.three {
/* 绝对定位 上边偏移 100 像素 */
top: 100px;
/* 绝对定位 左边偏移 100 像素 */
left: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>显示效果 :
12、z-index 属性值简介
使用 z-index 属性 , 可以设置 堆叠层级 , 数值越大 , 越靠上 ;
z-index属性取值范围 : 负整数 / 正整数 / 0 ;z-index属性默认值为 0 ;z-index属性值相同 , 那么按照先后顺序 , 后来的覆盖之前的 ;z-index属性值的数字后面没有单位 ;
z-index 属性 生效的情况 :
- 相对定位
- 绝对定位
- 固定定位
在其它情况 , 如 : 静态定位 , 浮动 , 标准流 下 , z-index 属性无效 ;
13、Display 显示模式转换
display 显示模式 , 可以分为
- 行内显示模式 ;
- 块内显示模式 ;
- 行内块显示模式 ;
将 元素 的显示模式修改为 行内块显示模式 的方法 :
- 使用 inline-block 可以改变显示模式 , 将 元素的显示模式 改为 行内块 显示模式 ;
- 使用 浮动 , 也可以 将 块内元素 改为 类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置 ;
- 绝对定位 和 固定定位 都可以到达 将 元素转为 行内块显示模式 的效果 ;
行内盒子 , 一旦使用了 浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性 ;
浮动元素 和 绝对定位 / 固定定位 元素 , 都是脱标的 , 都不会触发 外边距塌陷 问题 , 为 盒子设置 浮动 / 定位 , 就不用考虑 外边距塌陷的问题 ;
14、使用绝对定位 / 浮动解决外边距塌陷问题
在 标准流的父盒子 中 , 添加一个 标准流子盒子 ;
如果 子盒子设置 100 像素的外边距 , 父盒子也会被带下来 , 这就是外边距塌陷 ;
下面的示例 1 中 , 父盒子 和 子盒子 没有添加任何外边距 , 没有塌陷 ;
示例 2 中 , 为子盒子设置了 上外边距 , 结果将 父盒子也带下来了 ;
使用传统方法解决外边距塌陷问题 :
- 为 父容器 / 子元素 设置 内边距 / 边框 ;
- 下面是 为父容器设置 1 像素的 内边距 ; .father {
width: 400px;
height: 400px;
background-color: pink;
/* 为父容器 / 子元素设置内边距 / 边框 */
padding: 1px;
}- 为子元素设置浮动 , 可以解决 外边距 塌陷问题 ;
- 为子元素设置绝对定位 , 可以解决 外边距 塌陷问题 ;
15、元素显示与隐藏
控制 元素的 显示 与 隐藏 的样式有如下三种 :
- display
- visibility
- overflow
16、display 隐藏对象
为标签元素设置
代码语言：javascript复制display: none可以 隐藏该元素 ;
如果想要 显示该对象 , 为该元素设置
代码语言：javascript复制display: block即可 ;
设置 display: block 可以显示元素 , 同时该样式还可以将元素转为块元素 ;
使用 display 隐藏元素 , 该元素就会从标准流中脱离 , 后面的元素会顶上 ;
17、visibility 隐藏对象
visibility 的属性值 默认为 inherit , 继承自父元素 , 一般默认都是可见的 ; 一般情况下父元素设置不可见 , 子元素也同时不可见 ;
visibility 设置属性值 visible , 表示该元素是可见的 ;
visibility 设置属性值 hidden , 表示该元素是隐藏的 ;
visibility 显示对象 , 为其设置 visible 属性值即可 , 一般对象默认也是显示的 ;
visibility 隐藏对象 , 但是位置仍然保留 , 后续元素无法将其原来的位置覆盖 ;
18、overflow 隐藏对象
overflow 只能对超出部分隐藏代码 ;
overflow 可设置的值 :
- visible : 子元素超出父容器的部分仍然显示 ;
- hidden : 子元素超出父容器的部分隐藏 ;
- scroll : 不管子元素是否超出父容器 , 都显示滚动条 ;
- auto : 如果子元素超出父容器显示滚动条 , 如果子元素没有超出父容器不显示滚动条 ;
效果参考 【CSS】清除浮动 ② ( 清除浮动 - 父级元素设置 overflow 样式 | overflow 属性样式效果 | 溢出隐藏效果 | 垂直进度条效果 | 水平垂直进度条效果 ) 博客 ;
