72.尚硅谷_HTML&CSS基础_元素的层级.avi原创

来接着来说我们这个定位的啊，还有一个东西啊，定位相关的还有一个小的知识，来把这页面呢，我复制一下零四，我们先说一下什么呢？说一下我们这个层级的问题啊，层级的问题这里边呢，我们还是啊先把我们这个页面分，呃换成一个这么一个原始的状态啊，还是我们这个三个三个div啊BOX1BOX2还有这个BOX3保存，然后呢，在我们这个火狐里运行三个div对吧，然后呢，接下来我们来干这么一件事，嗯，我给这个报个三开启一个这个position，我们来什么的，来一个啊salute哎，我们说给报赛开启了这个什么玩绝对定位对吧？哎，绝对定位，然后我这一刷新，诶我们说了，诶你看是不是下边这个BOX3就就上去了，诶，因为BOX2脱离了我们这个，诶文本流啊，突然文档流啊，那接下来呢，我们来给它设置一个这个便移量。

先把一个注释写上啊，这是我们说开启相应定位来开启绝定位啊，开启定位，那这里边你要注意了，我们说了，当你开启绝对定位以后，我们元素的位置是不会变的，也就说你没有设置top left的时候，它的位置是不会变的嘛，换句话说，它实际上会有一个什么呀，有一个默认的top，还有一个默认的什么呀，Left那个默认的是谁呀？就是它不是不是零了，不是零，要是零是不是就跑这儿来了，诶那个默认值就是它原来那个位置那个值，比如说我们来看F12，点开我们328UG，直接选中我们这个元素，选中它来看我们这个布局这块，你来看这儿，诶在最外层，在外边距的外边，是不是就是我们这个定位啊，你来看这个是什么呀？Left left是什么呀？八正好是我们那个包定那个八个像素的那个不边距啊，诶，这是一个208，这是我们上面那个距离208吧，哎，208啊，所以注意它的默认值就是它原来那个位置那个值啊，哎，那所以这里边如果我把这什么呀，把这个life呢，我给它改成什么呢？我改成100以后，那你说上边。

这个top值变不变呀，哎，Top值是不会不会变的，看懂了吧，哎，Top值是不会变，Top值是不是还是二二百零八呀，哎，还是208啊，你要想让它上边去，你把top值干嘛呀，也改了，是不是还上去呢？哎，才上去啊，所以注意改一个值，那个值是不动的啊，那个值是不动的，好，这是一个好，那现在我们就说了，那这个里边呢，我们来给它开启了绝对定位，然后我们来给它设置一个这个便移量。设置我们这个偏移量，直接简单点，Top一个什么呀，100个像素，Life的一个什么呀，100个像素是不是就从我们装窗口这往下移100个呀，诶往下移100个这一刷新走你诶是不是正好把它给盖住了，诶盖住了这两个，诶那现在我们就要问题了，为什么BOX2可以盖住BOX1还有BOX3，哎是不是因为他开启了绝定位，是不是层级提升了呀，而我这个一还有三有没有开启定位呀，没有，他们还是我们这个文档流，所以高的是不是概率低的呀？哎高的概率低的好，那现在我来给BOX1开启一个position来一个什么呢？Relative，诶然后呢，给我们这个BOX3也开启一个，我让BOX1和box三都开启了一个什么呀定位了，也就是说，现在我123层级都干嘛了？

是不是都提升了呀？哎都提升了，那问题来了，那既然层级都提升了，那谁盖着谁呀？哎，我们来看效果啊一刷新，首先我们来看二跟一谁盖谁，是不是二盖着一啊诶然后三跟二谁盖谁，诶三盖着二，那既然层级都提升了，为什么是三盖二，二盖一啊哎三是不是跟这个二的下边啊，二在一的下边啊哎一的下边，所以这里边我们注意如果什么呢？如果我们元素的这个层级是一样的，如果我们这个定位元素哎层级是一样的，则什么呢？则下边的什么呀？元素会什么呀？诶会盖住上边的啊，下边的元素会盖住上边的，但是注意啊，这个下上指的是什么？指的是什么呀？结构上的啊，结构上的，因为我这个二是不是在三的上边啊，所以三会盖住二，二是不是在一的下边啊，哎，所以二会盖住一啊，所以。

这个这个上边下边指的什么呀？结构的啊，结构的啊，好，这是我们说的一个，那我们说了，那我现在不想让这个二被他们盖着，我希望干嘛呢？我希望还是让二盖着什么呀，盖着这俩，盖着一和三，那怎么办呀？完写下边去吧，完了写下边呢又。那那是不是样子就变了呀，结果就变了，那你无，那你无非就把这个变成一个，诶也也行是吧，哎也行，诶但是我们想想，那我能不能直接通过一个属相给他整过来呀，哎比如说那现在我们说了，他们现在是不是层级是一样的呀？哎，我能不能让干嘛呢？我让二再提升一个层级呢，能不能呢？诶那我们就要说到一个属性叫什么呢？叫做一个z index，通过我们叫什么呀？叫做一个z index属性可以干嘛呢？可以用来设置我们这个元素的什么呀，层级啊，通过z index可以用来设置元素层级，什么叫Z引dex，我们知道了，我们水平方向分什么呀，X轴还有什么呀，Y轴，那我们说了我们这个层级它还是不是水平方向的了，层级是不是变成这个垂直方向的，所以干嘛了，它给来了一个什么呀，Z index来表示什么呀，来表示我们元素的一个层级，哎，你就可以理解为什么呀，Z轴啊，Z轴Z来表示这个什么呀，层级。

那我们说干嘛呢？诶可以为我们这个Z引代指定一个什么呀，哎指定一个哎整数作为什么呀？哎作为这个值，或者严格来讲叫什么呀，叫做一个诶正整数，诶正整数作为这个值该值嘛呢？诶该值将会作为我们什么呀，当前元素的这个层级，层级越高什么呀，哎越优先显示啊越优先显示，所以呢，我们来看着啊，我直接给这个什么呀，报括四二我来什么呀？Z index我来什么呢？我就来个一，我就来个一，现在我是不是就给他写最隐ex了BOX1还有BOX3，我写没写啊没写也就是说是不是只有他有啊，那就是说现在我们BOX2是我们这个123里边层叠最高的，所以我们来看效果，我这一刷新走你干嘛了，是不是一不是这个二是不是盖住这个一和三了呀，哎，因为我这个Z引袋子给它设置了。

好，回过头来，我给我们BOX1设立一什么呢？设置一个z index，我来什么呢？来个那我发现什么了，BOX1是不是比我这个BOX2要要大了呀，哎，就说BOX1的层级是不是要比BOX2要高了呀？诶我们来看效果，我这一刷新走，你是不是一就盖住盖住二了呀？哎，就盖住二了，来我再给什么呢？我再给这个三也设置一个来一什么呀，Z隐ex就叫三吧，我一保存那什么效果呀，是不是三也盖住二了呀？哎，所以注意我们说了，Z引带子值高的，是不是盖住我们这个Z引带值低的呀？哎，那你觉得你二我觉得要让这二再高点，我来什么呀，来四个九。

一刷新是不是它最高了呀？哎，都盖住了啊，这值你还能再往大写啊，还能再往大写，你有多少层你就可以写，写多少层啊写多少层，所以注意通过这个z index可以干嘛呀？可以来修改我们元素的一个层级，但是这里边你还要注意的一个问题就什么呢？哎，对于什么呢？没有开启定位的元素不能使用我们这个z index啊，对于没有开启定位的元素不能使用the index，或者换句话说，如果你的position值是一个什么呀？Static这个自引代有没有用，没有用，和我们什么呀，和我面这个top right left bottom这个值是一样的，如果是没有开启定位是干嘛呀，是没有E的，包括文档这也写了，叫什么呀？忽略top bottom left right或者什么呀，The index，哎，如果你的值是static，我会自动忽略这么几个值，所以注意z index对于没有开启定位的元素，它不起作用啊，不起作用，好，那接下来我们再来看一种情况啊，还有一种特殊情况，我这。

来一个div，点一个BOX4 box4里边创建一个div，点一个BOX5，然后呢，我们这写一个点一个BOX4 box括四我们来一个Y，来一个200个像素hat也来一个这个200个像素background color，我们来一个这个orange orange，然后我们这复制一个来谁呢？来一个这个BOX5 box5我们来什么呢？来一个这个100HAT也是100颜色呢，我们来一个这个SKY服保存，现在一刷新走你诶这是BOX4，这个是不是BOX5，诶BOX5是BOX4的这个子元素，Box是BOX5的这个副元素，好，那现在我给BO4开启上停来一个position，来一个这个什么呀Q再给BOSS5呢，开启一个绝对定位，当然你开开箱的定位也行啊，只要开定位就行，这来开启一个这个绝对定位，直接来一个position，来一个什么呀。

Position来一个这个，诶UT是不是都开启定位了呀，哎保存那现在干嘛呢？我一保存一刷新，诶是不是我们这个box组在上头呀，还在上头，然后我给boss组设置一个这个什么呀，Z index。这index来什么呢？来个十吧，我这保存它的层级是不是十啊，然我们这个BO4是不是没有层级啊，哎，所以这块本来也盖着它是吧？哎，本来也盖着它，那现在要干嘛呢？我给Z隐给这个BOX4也来个这个Z隐带来什么呢？来个20没有啊，就是20，现在我们问你BOX4的层级是不是比BOX5的这个高了，诶那那按理来说BOX4是不是应该盖住BOX5啊，行不行，来我们刷新走你。

有变化吗？有变化吗？没有变化吧？哎，没有变化，那这里边我们要说一个啊，这个问题我们先来看Bo跟四和BOXX5什么关系啊，四是五的这个负元素吧，所以这块你要注意，负元素的这个层级再高干嘛呢？也不会盖住子元素啊，负元素的层级再高也不会盖住子元素，那这东西你可以怎么理解啊，你可以理解成什么呀？这个父爱比较比较伟大是吧？哎，不会盖住这个子元素，或者你也可以理解什么呀，水涨船高，那子元素在哪啊，是不是在负元素的上边呢？你负元素高了，子元素是不是跟着你也高了呀？诶，跟着也高了啊，所以注意负元素的层级再高也不会干嘛呀盖住子元素，所以以后你在设置这个层级的时候，你干嘛？你发现你这个元素层级都涉及到9万多了，都设到1亿多了是吧，发现干嘛这元素还盖不住，你要看看它俩是不是父子关系，父元素永远都盖不住什么呀，子元素啊，要盖住子元素。

好，这个是我们说的这个层级啊，简简单总结一下，它这个特点其实就有这么三条，第一条干嘛呀，下边的元素会盖住什么呀，上边的层级高的会盖住层级低的负元素盖不住子元素，哎，负元素盖不住子元素啊，这是我们说这个层级的问题，好，那这里边儿呢，我们先来一下。