html+css之定位

一 标准流(Normal Flow)

默认情况下，元素都是按照 normal flow (标准流、常规流、正常流、文档流[document flow])进行排布的
从左到右，从上到下按顺序进行排布
默认情况下，元素互相之间不存在层叠现象

margin、padding 定位

• 在标准流中，可以使用 margin、padding 对元素进行定位
• 其中 margin 还可以设置负数

缺点

• 设置一个元素的 margin 或者 padding，通常会影响标准流中其他元素的定位效果
• 不便于实现元素的层叠效果

解决方案：就使用定位来实现，啥是定位？下个章节中讲解

二 position 定位

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

1. static：静态定位，默认值
2. relative：相对定位
3. absolute：绝对定位
4. fixed：固定定位

2.1 static 静态定位

• position 属性的默认值
• 元素按照 normal flow 布局
• top、right、bottom、left 没有任何作用

2.2 relative 相对定位

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

练习: 背景图片自适应屏幕分辨率

方法一：定位实现

<div class="box">
	<img src="../img/mhxy.jpg" alt="">
</div>

.box {
	overflow: hidden;
}
.box img {
	position: relative;
	left: -960px;
	margin-left: 50%;
}

方法二：背景图片实现

<div class="box"></div>

.box {
	height: 420px;
	background-image: url('1.jpg');
	background-position: center -82px;
}

方法三：transform 实现

<div class="box">
	<img src="../img/mhxy.jpg" alt="">
</div>

.box {
	overflow: hidden;
}
.box img {
	transform: translate(-50%);
	margin-left: 50%;
}

图片路径

2.3 fixed 固定定位

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

2.4 absolute 绝对定位

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

定位元素

• position 值不为 static 的元素
• 也就是 position 值为 relative、fixed、absolute 的元素

自绝父相

• 在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位
• 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
  • 父元素设置 position：relative （让父元素成为定位元素，而且父元素不脱离标准流）
  • 子元素设置 position：absolute
  • 简称为：子绝父相

三 脱标元素的特点

• 可以随意设置宽高
• 宽高默认由内容决定
• 不再受标准流的约束
• 不再给父元素汇报宽高数据

四 定位技巧

• 绝对定位元素
  • position 值为 absolute 或者 fixed 的元素
  • 定位参照对象的宽度 = left + margin-left + 自身实际宽度 + right + margin-right
  • 定位参照对象的高度 = top + margin-top + 自身实际高度 + bottom + margin-bottom

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

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

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

width: 具体的宽度
left: 0
right: 0
margin: 0 auto

总结