定位

标准流 (Normal Flow)
CSS 属性 - position
- relative - 相对定位
- static - 静态定位
- fixed - 固定定位
- - 画布 (Canvas) 和视口 (Viewport)
  - 脱标元素的特点
- absolute - 绝对定位
- 子绝父相
- 练习 - 蒙版
- 绝对定位技巧
元素的层叠
- CSS属性 - z-index

博文集合：【重识 HTML + CSS】知识点目录

标准流 (Normal Flow)

normal flow 一般可以被称为标准流、常规流、正常流、文档流 (document flow)

默认情况下，元素都是按照 normal flow 进行定位：

从上到下、从左到右按顺序摆放好
默认情况下，互相之间不存在层叠现象

示例代码：标准流

margin、padding 定位：

在标准流中，可以使用 margin、padding 对元素进行定位（其中 margin 还可以设置负数）
比较明显的缺点是：
设置一个元素的 margin 或者 padding，通常会影响到标准流中其他元素的定位效果
不便于实现元素层叠的效果

CSS 属性 - position

利用 position 可以对元素进行定位，常用取值有 4 个：

static：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

relative - 相对定位

元素按照 normal flow 布局:

可以通过 left、right、top、bottom 进行定位
定位参照对象是元素自己原来的位置

left、right、top、bottom 用来设置元素的具体位置，对元素的作用如下图所示：

相对定位的应用场景：在不影响其他元素位置的前提下，对当前元素位置进行微调

实现代码：relative-练习-01

实现代码：relative-练习-02

static - 静态定位

static 是 position 属性的默认值
元素按照 normal flow 布局（没有脱标）
left 、right、top、bottom 没有任何作用

示例代码：relative

fixed - 固定定位

元素脱离 normal flow（脱离标准流、脱标）
可以通过left、right、top、bottom进行定位
定位参照对象是 视口(viewport)
当画布滚动时，固定不动

示例代码：fixed

画布 (Canvas) 和视口 (Viewport)

视口 (Viewport)

文档的可视区域
如右图红框所示

画布 (Canvas)

用于渲染文档的区域
文档内容超出视口范围，可以通过滚动查看

宽高对比：画布 >= 视口

脱标元素的特点

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
不再严格按照从上到下、从左到右排布
不再严格区分块级、行内级，块级、行内级的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局

示例代码：脱标元素_01、脱标元素_02

实现代码：fixed-练习

absolute - 绝对定位

元素脱离 normal flow（脱离标准流、脱标）
可以通过 left、right、top、bottom 进行定位
定位参照对象是最邻近的定位祖先元素；
如果找不到这样的祖先元素，参照对象是视口

定位元素 (positioned element)：position 不为 static 的元素，即 position 值为 relative、absolute、fixed 的元素

示例代码：absolute、absolute_技巧

子绝父相

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位

如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：

父元素设置 position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
子元素设置 position: absolute
简称为 “子绝父相”

示例代码：子绝父相

练习 - 蒙版

实现代码：absolute练习

绝对定位技巧

绝对定位元素 (absolutely positioned element)

position 值为 absolute 或者 fixed 的元素

对于绝对定位元素来说：

定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性

left: 0、right: 0、top: 0、bottom: 0、margin:0

如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性

left: 0、right: 0、top: 0、bottom: 0、margin: auto
另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

元素的层叠

示例代码：元素的层叠_01、元素的层叠_02

CSS属性 - z-index

z-index 属性用来设置定位元素的层叠顺序（仅对定位元素有效）

取值可以是正整数、负整数、0

比较原则：

如果是兄弟关系
z-index 越大，层叠在越上面
z-index 相等，写在后面的那个元素层叠在上面
如果不是兄弟关系
各自从元素自己以及祖先元素中，找出最邻近的 2 个定位元素进行比较
而且这 2 个定位元素必须有设置 z-index 的具体数值

示例代码：z-index_01、z-index_02

【重识 HTML + CSS】定位相关推荐

【重识 HTML + CSS】知识点目录
重识 HTML + CSS 前言基本 HTML 标签基本 CSS 属性 CSS 选择器 CSS 特性 HTML 列表.表格.表单 HTML 元素类型盒子模型相关知识点 Photoshop 简单使 ...
【重识 HTML + CSS】项目实战
项目实战常见项目目录 CSS Reset CSS 编码规范浏览器私有前缀 CSS 知识补充 CSS 属性 - white-space CSS 属性 - text-overflow image-se ...
【重识 HTML + CSS】浮动
浮动 CSS 属性 - float 浮动的规则浮动的应用浮动存在的问题:高度坍塌清浮动的常见方法 CSS 属性 - clear 各种定位方案对比博文集合:[重识 HTML + CSS]知识点目 ...
【重识 HTML + CSS】背景相关知识点
background 背景 CSS 属性 - 背景 CSS 属性 - background-image 设置元素背景图片 CSS 属性 - background-repeat 设置背景图片是否平铺 C ...
【重识 HTML + CSS】CSS 选择器
CSS 选择器 selector 元素选择器 (type selectors):div {} 通用选择器 (universal selector):* {} id 选择器 (id selectors) ...
【重识 HTML + CSS】基本 CSS 属性
[重识 HTML + CSS] CSS 简介内联样式.文档样式表.外部样式表 @charset.@import 注释 HTML 和 CSS 的编写准则设置网页的图标常用 CSS 属性初识 CS ...
【重识 HTML + CSS】网页基础知识、基本 HTML 标签
重识 HTML + CSS 网页的基础知识网页的显示过程缓存(cache)技术浏览器内核常用 HTML 元素 DOCTYPE 文档说明 html 元素:根元素 lang 属性 head 元素: ...
【重识 HTML + CSS】官方文档的阅读
官方文档 CSS 属性的描述 CSS 属性的取值组合 (combinators) 出现次数 (multipliers) 类型 (types) < number >.< intege ...
【重识 HTML + CSS】Photoshop 简单使用
Photoshop Photoshop 简介常用功能常用面板常用设置单位设置标尺设置颜色模式设置移动工具设置增加画布大小常用快捷键矩形选框工具 (D) 裁剪工具.切片工具 (C) ...

【重识 HTML + CSS】定位

定位