Normal flow
-
默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行定位
-
default: 不存在层叠现象
-
标准流一般是通过margin padding进行定位
-
脱标元素使用position: fixed和absolute定位
使用margin/padding定位的缺点
1. 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
2. 不便于实现元素层叠的效果(可将margin设置为负数实现, 缺陷是会影响其他元素)
- 引入position, 可实现层叠效果
position相对定位 重点且常用
-
利用position可以对元素进行相对定位
-
static：静态定位 default
-
relative：相对定位 p:r
-
absolute：绝对定位 相对于自己原来的位置定位
-
fixed：固定定位 相对于viewport fixed
relative 参照原来自己的位置进行定位
//使用方式
position: relative;
left:10px;
原来占据的空间还在,所以还是属于normal flow
containing block
-
left:50%;
-
img, 是*containing block(包含它的div)的值
-
若是文字,是*font-size的值
relative 应用: 使用sub/sup设置上下标
sub, sup{
font-size: 0.5em;
}
/*设置下标*/
sub{
/*使用的好处,适配不同的font-size*/
position: relative;
/*top: -4px;*/
/* 0.4*10px 使得无论自己的font-size怎么变都会底部平齐*/
top: -0.4em;
}</pre>
relative 应用2 显示重要大图 使用img标签
水平垂直居中
img宽度或者高度超出父元素, 不能用text-align:center;
div{
overflow: hidden;
min-width: 1100px;
}
img{
position: relative;
/*希望能够得到根据父元素改变的功能*/
/*通过两个属性实现*/
/*相对于containing-block(50%)*/
left: 50%;
margin-left: -960px;
/*left: -960px;*/
/*margin-left: 50%;*/
}</pre>
<div>
<img src="images/mhxy.jpg" alt="">
</div></pre>
有两种方法的深层原因: margin-left和left都是相对于containing block, 并且都能设置为负数
实际上四种方法 margin-right/ right
-
containing block一般指的是父元素, except float.
-
脱标元素的水平垂直居中公式: 绝对定位技巧
重要大图垂直居中同理
fixed 脱离标准流
因为脱标所以会悬浮在最上层, 并且不占位置
-
可以通过left、right、top、bottom进行定位. 注意没有center
-
定位参照对象是视口（viewport）
当画布滚动时，固定不动
-
视口（Viewport）文档的可视区域
-
画布（Canvas）用于渲染文档的区域
-
文档内容超出视口范围，可以通过滚动查看
-
画布 >= 视口
对比bg的background-attanchment:fixed; //非重要大图,都是相对于viewport
标准流和脱标结合
-
将包裹子元素的div脱标
-
监听canvas的滚动 js
脱标元素特点
-
可以随意设置宽高, 宽高默认由内容决定
-
不再受标准流的约束
-
悬浮, 并向父元素汇报宽高数据(不占位置)
-
!!!不再严格区分块级, 行内级, 行内块级的, 并且相关的很多特性都会消失
-
不再给父元素汇报宽高数据
-
脱标元素内部默认还是按照标准流布局
Warning!!! 脱标元素宽高和位置
-
width height left top margin-left margin-right都相对于最近的定位祖先元素
-
width*50% //指的是 * 最近的定位祖先元素的宽度
-
标准流相对于父元素
定位元素（positioned element）
-
position值不为static的元素
-
也就是position值为relative、absolute、fixed的元素
absolute 脱离标准流 常用
-
定位参照对象是最邻近的定位(relative, fixed, absolute)祖先元素
-
如果找不到这样的祖先元素，参照对象是viewport
=> 反推:
1. 若需要子元素相对于某个元素设置坐标,将自己的position设置为absolute
2. 若需要相对于viewport, 设置fixed
3. 若相对于原来自己的位置,设置relative
查看是否相对于viewport, 设置left/top:0; 查看是否在左上角(div并不顶格)
子绝父相 重点 练习
-
movie
-
二维码
脱标后, 只要不是display:none; 都会显示
下载和二维码之间不能出现断层
先将所有元素都显示, 再做其他效果
绝对定位技巧 重要
- 子元素必须为position: absolute;
absolute水平垂直居中原理.png
=>
absolute水平垂直居中公式.png
.test {
position: absolute;
margin:auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}</pre>
Summary
position四个属性值比较.png
或子绝父绝
最外层一定至少有一个元素相对于viewport
补充问题
input是替换元素, 一般不使用的一些type类型
a元素不能嵌套a元素
<!-- <div class="test"></div> 的Emmet简写-->
.test
元素的重叠
元素的重叠问题.png
-
按照html显示的顺序覆盖
-
定位元素盖住非定位元素
层叠优先级
- 定位元素 > html顺序
引入z-index
-
z-index属性用来设置定位元素的层叠顺序
-
仅对定位元素有效,取值正整数、负整数、0
比较原则 z-index
都是定位元素,并且有z-index值
1. 如果是兄弟关系
-
z-index越大，层叠在越上面
-
z-index相等，写在后面的那个元素层叠在上面
- 如果不是兄弟关系
-
各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
-
而且这2个定位元素必须有设置z-index的具体数值, 才能参与比较.
层级复杂时较麻烦
-
!!! 找到两个子元素的最临近(两个元素的html位置最接近)并且有z-index值的两个定位元素的z-index值比较, 若父*n元素们都没有z-index值,就用自己的
-
注意: z-index默认值为auto, 并不是0
网友评论