尚硅谷前端基础 (74)

好，那么关于我们定位的这个基础知识呢，我们就说的差不多了，然后我们再补充一点点内容，然后我们就可以来做我们定位的练习了啊，创建一个我们来说一个我们元素的一个层级，哎，元素的一个层级，呃，层级的话，在这其实我们主要说的是一个这个zdex这么一个东西啊，呃，写一个页面，我应该把我刚才那个最开始那个粘过来啊，最开始这个就是BOX1 box2box3啊三个元素啊，把这些都给它去掉。保存一下，嗯，在这儿我们来打开三个元素，1233个元素，那这里呢，我们来整一个东西啊整个什么呢？哎，我们现在呢，给我的BOX2啊给给BOX3吧，给box，呃，给BOX3呢，我给这。我想一下怎么写啊，这样吧，我给这三个东西啊，我都开启一个绝对定位，哎，我让他们三个都是一个绝定位，那这个时候其实你会发现会有一个结果，就什么呢，这三个元素呢，就会落到了一起，我先让这个谁呀，我先让这个二开启啊，先让二开启position，一个absolute，我给二开启一个绝对定位，绝定位以后呢，我给二啊移动一下位置，哎，我让二干嘛呢？往上移动，我让它来一个top啊top，因为现在的话，如果我写一个TOP0，它实际上就跑到最上边了，对吧，我写一个什么呢？我写一个top，一个100像素，那应该正好在他们两个中间这个位置，那现在我们会发现，现在这个二呢，它既盖着一，也盖是什么呢？也盖着三，为什么呢？因为二开启了绝对定位，而开启了绝对定位以后，它的层级是不是提升了，哎，它的层级提升了，那么也就是说它比文档流里的这个一还有三的层级高，所以就导致二。

是不是就盖住这个一和三了，诶一和三了，那现在我希望什么呢？诶，我希望我这个一和三呀，可以通过二给透过来啊，可以透过来，所以这个时候我们可以改变一下它的背景颜色，改成什么呢？改成一个rgba rgba的话我们选一个颜色吧，哎，我这写一个255，写一个这个零啊，这也写一个零，然后呢，我们来一个点三的一个透明，这个东西你们应该还记得对吧，我们的一个透明的一个颜色啊，点三一个透明，点三的一个透明啊，透明一个红色，那这个时候用这个透明的好处就是我们可以让这个三和一从那儿透过来，我们现在就看着了，我的这个二是不是压着这个三和一啊，哎，因为二的层级会比较比较高，那这时候就有问题了，那现在我给二开启了决定位，它的层级提升了，那这个时候呢，诶，我如果给三也开启一个决定位，那么三的层级是不是也会提升了，哎，那这个时候问题来了。

三的层级提了，二的层级也提升了，那这个时候三跟二谁盖着谁呢？谁盖着谁，哎很明显，现在是不是这个三盖着这个二啊，哎，三盖着这个二，那问题就来了，诶我也绝对定位，你也绝定位，但是跟绝对定位没有关系是吧？只要是定位啊，你是relative也行，你是absolute是FA，都一样啊，都一样，因为开启定位嘛啊，我也开启定位，你也开启定位，我层级也提升，你层级也提升，那么为什么是三盖住二，而不是二盖住三呢？懂意思吗？哎，为什么三盖二不是二盖三呢？好，那这时候再看啊，我给一也开启决定位，一要开启决定位，他们的位置会发生变化，我们来看一下，哎，现在是整个这样了，对吧，我这样调整一下位置啊，停这位置啊，我现在的话，他们三个是等于落到一起了，落到一起其实你也可以很明显的看出来，三是在最上边的啊，而二跟一都在下边对吧，我给它设置一个偏移量一我不设置，二呢，我们给它设置一个。

这top来一个100 life的来一个100，哎，然后呢三呢，我来一个top是一个200 life也是200，现在他们三个是叠到一起了，叠到一起哎呀，这个叠的有点不明显啊，明显我们来再调整一下，我这来个50，这来50。

啊，这儿呢，是100。这是100啊，我让这三个落到一起，这样你就能很明显的看到他们三个一个层级关系，实际上现在是321，是不是三压着二，二压着一呀，哎，二压着一，那现在我们先说一个问题，我现在想干嘛呢？我想让这个一在上面，哎，我想让这个一压到二，同时也压住三，那怎么办？哎，那这里边我们直接说一下，哎在对于什么呢？对于我们这个开启了这个定位的元素啊，一定注意前提是开启了定位，你的position值不是static，我们可以通过这个z index z index属性来指定我们这个元素的一个层级，Z index什么呢？Z index需要一个这个整数，作为什么呢？作为这个参数，它的值越大，我们这个元素的这个层级越高啊，元素的层级越高，元。

做什么呢？元素的这个层级越高它就越什么呢？越优先显示，所以z index就涉及层级的啊，什么叫z index？其实你可以想象一下我们的二维空间是吧，两个方向，一个是水平方向，还有一个是垂直方向，这是一个平面对吧？二维空间，而我们的三维空间呢，它会出现一个高度对吧？这个高度，那水平方向我们叫X轴，垂直方向我们叫Y轴，而这个这个什么呢？高度我们叫什么呢？叫Z轴，这个Z轴你可以想象成什么呢？想象成个Z轴是从这个屏幕里边钻出来的，直接往你这钻的啊，直接往钻的就是它像一把剑一样从屏幕钻，钻出来，直接对你的眼睛，直接怼你的眼睛是吧？当然没事。

你看啊，它不会真的出来一把剑扎你是吧？你就想象一下，有一把剑从这个屏幕直接出来，要扎你的眼睛，那这个就是一个Z轴啊，这就是一个Z轴，那这个Z轴的值越大就相当于这个键越长就相当于它离我们的眼睛越近啊，越大离我们眼睛越近，所以这个时候注意它需要的是一个整数作为参数，那假如说我给我们的BOX1指定一个Z引代，叫做一个一，那现在注意就意味着BOX1的Z引带的是一，那也就是说BOX1离我们的距离是不是就就一啊，哎，离我们近啊，离我们近距离越大，离我们越近啊，距离越大离我们越近，那这个时候你会发现什么效果呢？一是不是就跑上面来了，哎，一跑上面来了，那好，那现在我给BOX2，我设置一个z index，它来一个什么呢？我来一个二，那这时候你会发现什么呢？诶，那二是不是这个值就更大了，那更大以后那就是二既盖住一也盖住了三啊也盖住了三，那好，那我如果给zex。

我给三设置一个z index，我来一个三，那这个时候三是不是就大了，哎，那三就跑前面了，所以z index设置层级的这个值越大，哎，你的位置越靠前，谁大谁在前面啊，谁大谁就盖着别人啊，这个是我们说的一个z index啊这样一个效果，那这里边呢，注意了，那其实就会有问题了，那假如我三个值都一样。或者像我们刚才那种情况，我三个我都不写呢，都不写呢，都不写这时候会是一个什么情况？诶，那都不写是不是就三在上边了，哎，三在上边了啊，所以注意z index需要一个整数作为参数，Z index的值越大层级越高，层级越高越优先显示，如果元素的这个层级一样，则什么呢？则优先显示我们这个靠下的元素啊，元素的层级如果一样，则优先靠选择显示靠下的，靠下指的是什么？指的是我们结构上，你看123BOX1233是不是在最里边啊，诶所以当他们层级一样的时候，我们会优先显示三，因为三的位置比较靠下啊，优先显示靠下，你可以想着就这哥哥让着弟弟是吧，哥哥让着弟弟啊这么一个关系。

比较简单啊，不多说了啊，C index来控制我们元素一个层级的啊，层级的你就是说白了，你想让它在上边，你把它层级给它调高点，你想它向下边层级调调低点，但是其实层级也可以设置负数，但是负数的情况我不想跟你们说了，一般我们也不会设置啊，也不会设置负数，不要设置负数，设置负数你会很恶心，你把这个复数这个事给忘了就行了啊好，那接着再往下说一个问题啊，我们这再来整一个div div呢，这我们写一个叫做一个box，点一个这样吧。

我们这不有个BOX3吗？BOX3里边呢，我整一个div，点一个这个BOX4 box4呢，我也给它开启，哎，设置一下样式啊，点一个四呢是一个100 hi呢是一个100，然后background color color，我们给它来一个orange，那现在呢，这个是我这个四啊，写一个四，诶这是三，这是四，四是三的子元素，那同样我给我们的BOX4设置一个相对定位或者绝定位都行啊，就是定位的层级都是一样的，定位就不分什么，不是说我绝对定位就比相对定位层级高，固定定位就比绝定位层级高，没有啊定位只要是定位层级就是一样的，只要是定位就是由z index来决定他们谁在前谁在后，所以这个时候现在来看，我给BOX4也开启了绝对定位，我给BOX3也开启了定位，你看谁在上。

上边是不是四在上边儿，哎四在上边，为什么呀，你可以这么理解，哎四是。后边的呗，是吧，下边的，所以四肯定盖住三，那现在我希望三可以盖住四，三可以盖住四，那么我就给我的四设置一个z index是三不是我给BOX3啊设置一个z index3，那现在注意了BOX3设置了z index box了吗？没设置，但是你要注意我们的效果上，三有没有把四盖住，没有盖住啊，没有盖住不废话了，直接给你结论，注意了，三和四什么关系，三和四是父子元素，或者就是祖先后代，所以记住一句话，祖先元素的层级，层级再高他也不会盖住什么呢？盖住我们这个后代元素啊，祖先元素的层级再高，它也不会盖住后代元素，你可以这么理解啊，你可以这么理解这个什么呢？

子元素，我们的后代元素是不是在祖先元素里边啊，哎，OK，你把祖先元素的层级设置高了，它本来就在里边，那么水涨船高，祖先元素高了，它的这个后代元素是会跟着一起高啊，哎，一起高，所以你没有办法通过给祖先元素设置层级来盖住后代，记住结论就行了啊，不用再过度的纠结，就是记住了，祖先元素永远盖不住后代元素，当然你也可以理解成是什么呀，是这个，诶，伟大的这个父爱对吧？一个父亲他再再什么什么，他也不会去遮住这个紫元素，不让他的孩子出来，对吧？是这么一个特点，好，这个是我们说的一个层级，那接下来呢，我们就是关于定位的基础知识，我们就都说完了，那接下来我们可以做一个练习，还是我先把这个练习交给你，你先自己尝试去做一下，然后待会儿我们再去讲什么练习呢，哎，京东。

京东我们来看啊，其实我们这个定位的话，呃，定位的应用它很少说在我的一个网页里去大范围的应用的去定位，尤其是现在在以前的话，我们可能还会用挺多的定位的，因为有的时候我们有些公司对我们这个网页的要求会比较严格，他要求我们做的这个网页要干嘛呢？要跟这个设计图一模一样，一个像素都不能差，那这个时候就逼的我们这些，哎网页工程师或者说前端工程师，那就不得不在网页里面用大量的定位去定位这个元素，只因为只有这样才能真的保证和我们网那个设计图一个项目都不差，但是现在这种缺德的需求越来越少了，很少有公司说，哎呀，我这个必须得跟设计图一模一样，很少了，所以现在的话，在我们网页里这种大规模的布局，你像这种块。这种块。像这种块啊，大规模的外围的这种宏观上的大局的一个布局，很少用定位去做了，一般就用什么了，哎，用我们这个浮动啊，矿元素啊就可以搞定了，很少去定位，所以定位都是一些小块，一些需要微调的一些比较细腻的位置，我们需要去定位，所以那像我们哪可以用到定位呢？诶最典型的就是一个我们中间这个轮播图。

轮播图，轮播图这块很明显，它首先是有多个图片，是不是之间要进行切换呀，哎，然后这是不还有一个小点点，通过这个点可以切换呀，诶像这儿是不是也可以通过这个箭头去切换呀，那像这种轮播图里边就要用很多的这种定位来实现啊，很多定位来实现，那接下来我们要做的练习就是这么一个轮播图啊轮播图那么现在你要做的事，自己想一下这个东西要怎么去做，我先不给你提示啊，怎么去做，尝试着把这轮播图给做出来，就做轮播图，别的不用做啊，就做轮播图，而且轮播图这块啊，这两个东西现在暂时不需要你去做啊，这两个东西暂时不需要你做，你就把这个图做出来，然后呢，把这几个点这给做出来就OK了，自己来尝试一下啊，我们待会儿再来讲这个练习啊，我们先听一下。