前端学习笔记----Day09_position定位

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;
}

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%;*/
}

有两种方法的深层原因: 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;
}

Summary

position四个属性值比较.png

或子绝父绝

最外层一定至少有一个元素相对于viewport

补充问题

input是替换元素, 一般不使用的一些type类型

a元素不能嵌套a元素

 .test 

元素的重叠

元素的重叠问题.png

• 按照html显示的顺序覆盖

• 定位元素盖住非定位元素
  
  

层叠优先级

• 定位元素 > html顺序

引入z-index

• z-index属性用来设置定位元素的层叠顺序

• 仅对定位元素有效,取值正整数、负整数、0
  
  

比较原则 z-index

都是定位元素,并且有z-index值

1. 如果是兄弟关系

• z-index越大，层叠在越上面

• z-index相等，写在后面的那个元素层叠在上面

2. 如果不是兄弟关系

• 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较

• 而且这2个定位元素必须有设置z-index的具体数值, 才能参与比较.

层级复杂时较麻烦

• !!! 找到两个子元素的最临近(两个元素的html位置最接近)并且有z-index值的两个定位元素的z-index值比较, 若父*n元素们都没有z-index值,就用自己的

• 注意: z-index默认值为auto, 并不是0