发表于: 2018-07-01 20:51:06

1 767


#今天完成的事

准备小课堂

#明天计划的事

继续任务十四,十五

#遇到的问题

这次我选的小课堂题目是,position有哪些定位?它们各自的特点是什么?

以前总觉得自己懂了什么是position定位,也基本会用position定位,但是

事实证明,自己了解的还不够多,这次又是挖掘出了很多自己不知道的知识

点。

基本的属性之前都有过了解了

默认值

遵循正常文档流

可能的值,常用的就三个,relative,absolute和fixed,基本的用法都知道了。

想要说的是自己之前不知道的东西:

relative,absolute,fixed就好像三兄弟,relative是大哥,absolute是二弟,fixed是三弟。因为出生的时候上天赋予二弟的天赋技能比较厉害,它们的母亲怕二弟不听话,干出一些出格的事情,所以它们的母亲教给了大哥一种魔法,可以让大哥对二弟严加管教。

本来二弟的技能就是想去哪就去哪,甚至可以上天。但是经过大哥施法以后,最多也就是能到房顶的角落瑟瑟发抖,就像这样的画风。


大哥对二弟有着诸多限制,他们之间就是一种相煎关系,限制作用如下

可以看到这张图,就可以明白大哥对二弟的限制之二,限制absolute的层级,如图处于台阶三的大哥施法把处于z-index:1的二弟困住了,处于台阶二的大哥把z-index:3的小弟困住了,但是z-index:1的小弟的层级比z-index:3的小弟高

relative定位有两个特点:1.相对于自身2.无侵入

那么什么是无侵入呢?无侵入就是就算是偏离了位置,还是占据着文档流,具体应用就是网页上的自定义拖拽,如图

想要把这两个div交换位置的话,可以对他们两都使用relative,而且不会影响上面的元素。

还有一个问题就是当对立属性同时存在时,大哥和二弟的表现是不一样的

大哥relative表现为斗争,不是你死就是我亡,对立属性只能存在一个,而二弟就不一样了,二弟的表现为斗争,对立属性可以同时存在。

relative还可以层叠上下文,假如说一个盒子里有两张图片,开始是这样的

我们想要被覆盖的美女上前就可以使用relative,只要使用了relative,任何的层级都是干不过它的

刚刚说了,relative只要设定了z-index具体数值,那么就是可以把二弟给牢牢限制住的,还有一种意外的情况,那就是当z-index为auto时,这时候情况就不一样了,如下图

在上面有一张图片当中二弟是被牢牢套住的,并且层级上是z-index:1的二弟高于z-index:3的二弟,但是当z-index为auto时,情况就相反了,z-index:3的二弟层级超过了z-index:1的二弟。这种情况在IE6.7当中是不存在的,也就是说当relative的z-index为auto时以上表现是正常情况。但是在IE6.7下是不会变化的,所以在IE6.7下不变化是个bug

relative还有个最小化影响的原则

我们应当尽量不使用relative,就算逼不得已,也要使relative最小化

absolute定位可以不依赖relative,比如说在一个容器中有很多元素,想让一个元素定位到左上角,我们一般的做法就是给父元素relative然后子元素absolute:top,left:0,这里其实是有问题的,完全可以不用relative,直接只需要position:absolute就可以做到,就算有距离上的细微差异也可以用margin调整

那么假如说我们要使一个容器中的一个元素定位到右上角呢?

一般的做法也是给父元素relative然后absolute:top,right:0就像下图这样的

这样做其实很容易出问的,各种层级上的问题,各种被覆盖的问题,这时候我们就可以使用relative最小化的原则。给要定位的元素独立出一个div,如下图,这样就没有任何问题,而且布局上是一摸一样的







返回列表 返回列表
评论

    分享到