11定位与层叠关系

11课定位与层叠关系

11.1定位

参考点概念

一些进行位移的功能都是要以一个参考点作为基准,左移多少,右移多少,上移多少,下移多少.

定位分类

• 定位分类

  • 默认定位 static… 正常文档流

  • 相对定位 relative

  • 绝对定位 absolute

  • 固定定位 fixed

  • 粘性定位 sticky

  ​

  ​

  ​

定位属性逼不得已不要去用,不好管理,做位移时,做层叠时才用

---

绝对定位 absolute

absolutely的参考点是距离最近的一个被定位的位置.

相对定位 relative

参考系是原来的自己

通过relative进行定位

离自己的的位置,向左边走100px

{relative}

这个是浏览插件用来检测某个元素的参考定位是谁

固定定位 fixed

fixed上的那些小广告都是这样的!!也用于做贴边固定栏,比如百度百科的目录导航!!

酷炫的sticky

先正常移动,达到某个位置以后,就会fixed,

拿出手机,手机上面的a~z的标签,正常情况下会移动,达到某个位置会sticky一会,达到某个位置就又会消失.

悬浮导航栏!

唯品会的导航就是这样的!!!会一直停在上面.

sticky关键代码

position:sticky; top:10px;

---

定位标签的特性

• relative永远是参考自己没有定位前的坐标为原点进行位移

• absolutely是参考离自己最近的参考系点进行定位.

• 某个元素一旦拥有了定位标签,则自己也成为了一个参考系.

脱离文档流特性

inline-block 依次排开,红红绿红红.

relative定位以后

用relative,原来的位置还留着

绝对定位就不会再占原来的位置了.这个属性相于float一样脱离了原来文档流的束缚

如同float一样,如果脱离了文档流的束缚,就会出现塌陷的可能

具有脱离文档流属性的标签总结

1. absolute
2. fixed

3. float

   ​

三者都会脱离文档流.以此特性其父也会造成塌陷,与之前学float时的解决办相同

11.2层叠

后来居上排列

书写的时候,

​ 后面的元素会覆盖前边元素之上.

同一层级的排列规则

问题:将background,块级元素,浮动元素,行内元素进行排序怎么排?

答案:

• background

  • 块级元素
  • 浮动元素
    
    • 行内元素(内容才是最重要的,所在在最上面)

  ​(下面代码说明问题)

background / border

​ 负值的z-index

​ 块级元素

​ 浮动元素

​ 行内元素(内容很重要,所以级别高)

​ z-index auto

​ 正值的z-index

z-index随着定位的出现而出现

z-index 只有定位的元素才会有效果.

同层排列示意图

这里注意一点,如果同一层叠上下文内,负值的z-index是显示在背景之上的!!

怎么没有frameset,记得老师曾说过,frame是与body一个级别的标签!!!!所以你觉得呢.

z-dindex排列规则

元素不具有定位时,谁大谁牛逼

​ 这个悬浮打开的栏目,要在轮转图之上,怎么保证呢?用z-index

​ 利用z-index来实进行标记,值大者,优先显示在上层

父级有定位属性了,依然是儿子谁大谁牛逼

元素具有了定位属性后

父级有了z-index,这个时候就拼爹

父级设定了z-index后,儿子就不管用了,这个时候拼爹,谁爹大谁在上

负值的z-index

父级有定位没定位时,负值都会在下边

​

父级默认z-index:auto,图片还在下面(不认爹)

f

父级设置了z-index以后,图片就飘上来了. (认爹了)(父亲得道,儿子也升开)

z-index:auto与z-index:0的最大区别就是

z-index:auto ,一个儿子自己决定自己的地位,

z-index:0; 老爸出身就是0,儿子认爹了.

层级有点类似小数点的关系

如果父亲A-index:2;儿子a-index:3

​ 那么儿子a的整体级别就是2.3级

如果父亲B为0.儿子为3

​ 那儿子b的层级就是0.3级

如果父亲C为auto,儿子c为3,

​ 那儿子c就是 3级,也就是3级, 3级与0.3级就完全不是一个概念了

所以abc三个儿子的排序为 c>a>b

z-index规则总结

​ 1.没有定位父级的时候,谁的index大谁在上

​ 2.父级有定位的时候,依然是子级谁的index大谁在上(谁大谁)

​ 3.父级设定z-index,谁的父级的index大谁在上(拼爹)

​ 4.负值

​ 4.1父级有定位没定位时,负值都会在下边

​ 4.2父级默认z-index:auto,图片还在下面(不认爹)

​ 4.3父级设置了z-index以后,图片就飘上来了. (认爹了)(父亲得道,儿子也升开)

​

层叠排序与第一个层上的元素排序

所有前后排理规则总结

1默认元素,后来居上,按照加载顺序来

2同一层级排列的 按层级排列(术语:层叠上下文之间的排列)

3z-index拼爹排列规则(术语:层叠水平之间的排列)

共同构成整个网页内容的排列规则.

问题汇总

• [x] z-index:auto与z-index:0有很大区别?区别在哪?

  答:auto是脱离父子关系

  ​ 0是建立了父子关系,被爹坑.