定位----朱雀老师

关于元素的排列

文档流   : 从上到上. 从左到右

脱离文档流 :  浮了一层

浮动  是飘起来后 ,还是横排显示,不能做到 飘起来飘在另一个元素的上空/

如需要达到这个效果,就需要定位

三种定位

绝对 ,相对, 固定定位

定位需要两个点 就可以固定一个点

不同的定位, 参照的点是不同的

相对定位: 虽然飘起来了,但还是占着自己原来的位置.

是参照没有定位前的自己的位置.

 

因为  网页的排列是 从上往下, 从左到右,所以,

top值 :  正值 向右, 负值往左

相对定位的两个功效(特效):

而浮动 float ,

而定位使用后:

绝对定位: absolute

没有相对定位那么温柔 比较骚气.

 

脱离文档流 在文档流中 不占位置了. 提升了层级  更高 会飘起来.

两个定位元素,遵循 后来居上的层级原则.

绝对定位的参照物: 是定位父级(被定位了的父级.)

不单是他的父级.而是一个定位的.父级. 如果,父级中一直找上去,都没有找到定位父级,则会参照文档流.

位置的正负:

定位父级继续深化理解

找定位父级的原则

一是  有利于定位书写

二是给相对定位

我的京东 , 是相对定位 , 而大方框是绝对定位,是飘在底部内容上面的.

定位父级 不一定必须是相对定位. 上面如果本来就具有绝对定位, 找到这个绝对定位就可以了.就不必要再重新给一个相对定位了.

绝对定位的特性:

如果不固定宽度.会 ----------

能用浮动解决问题的就不要用定位. 会破坏文档流的布局.

绝对和相对定位的使用场景:

 

固定定位: 参照浏览器窗口

如,侧边导航栏 和 顶部导航栏.

作业:

随堂笔记. 行云流水..