00:00
我们继续来上课,那么我们这节课再来看一下它叫什么,根据窗口定位,也叫什么固定定位啊,固定定位是为了固定某一个元素在某一个位置上啊,咱们来看在这里边。我们怎么样,什么时候用到固定定位,比如说在这里边,你看我的这个,其实我们现在看的这三个元素,一个是这个,还有这个以及这个他们就是固定定位来做的,你看啊,为什么这么说,你看当我去拖动滚动条的时候,看它们三个的位置有去改变吗?没有吧,哎,那么没有去改变,那就证明什么,证明这三个加伙都是什么,都是固定定位固定到这里了啊,无论我们之前用的相对定位还是绝对定位,只要滚动条拖动,滚动条它页面在滚动,它也会跟着干嘛,是不是滚动的,哎,但是是固定定位的话,它相当于什么呢?相当于定位到我这个窗口这个位置,然后定位到我窗口这位置,它就不会去什么,不会去改变了。啊,这是固定定位,我们会用到的地方,那还有什么呢?还有一种情况就是这个我们经常去拖动页面,可能这块会显示一个什么,显示一个滚动条,不是滚动条显示一个这个导航对吧,始终都在这个位置,那这也是一样,是用什么固定定位来做的,咱们来看我这里边有。
01:10
比如说,嗯。C盘。页面。这里。首页。来你看比如说这里边啊,这是不是导航条了,但现在你看我和拉开在动,对吧,你看他在动,当我拉到一定程度的时候,你看它是不是始终都固定到这个位置,它是不是固定到这个位置了,哎,无论我下面怎么动,你看这块是不是都固定的,这块是不是也是固定的,哎,那么也就证明什么。它是一个什么,它是一个固定定位来做出来的效果啊好了,那我们来看一下这个固定定位我们怎么来做,在这里边一样。新建一个HTML文件,叫做零三固定定位。来,比如说在这里边,我们给他一个div,我们也做一个侧边栏,起起名sid啊,做一个侧边栏啊,Side。
02:03
BL塞德。好,然后style标签在这块我们来去设置一下,叫做点点3.38,给它设置一个,比如说宽度为多少呢?为80像素,然后高度为多少呢?为400像素。好了,然后给他一个BD移像素实现的这个井号CDC这么一个边框啊,OK,我们没学过边框是吧,我们先用b background嘛啊,给他一个这个。粉色,那现在咱们来看我当前页面元素中。是不是有这么一个东西,那这个东西最终是不是得定位到定位到这个最右侧呀,对不对,那好了,那咱就直接给他做了psi position等于什么呀,等于fixxedd对吧,那这个时候来刷新你看。没动是吧,因为什么没移动它,我让它right距离右边的距离为为零,为零是不是紧贴到右边了,那这个时候走你你看是不是到右边了,也就是说我不一定非得用top跟LA,我也可以用什么用rap对吧,然后呢。
03:04
注意右边我是定位过来,但是呢,它的这个顶部呢,顶部是不是类似于居中的这么一个效果呀,对不对,比如说这里面的top顶部对吧,具体顶部多少,具体顶部我们也不知道是多少。没错吧,哎,所以这里边我们可以用一个什么CSS的计算属性,Co LC一个计算属性啊,它只是用作于计算的,也就是说这里边比如说我告诉他100除以二。对吧,他帮我算出100除以二等多少,就是这个意思,明白吧,那你要正常,比如说我正常在这写。写100除以二,他会帮我计算吗?不会啊,你要想要计算,必须使用clc这么一个属性,然后把这个值放到这里面,100除以二这才可以啊,这才可以,那么我们要想象这个元素居中,怎么样能算出它的居中呢?咱们来看啊,在这里边,比如说当前啊,我们浏览器有这么一个高度,对不对,然后呢,我们元素大小呢,诶,比如在这儿这么个高度。对吧,那么要想让这个元素在这里面能居中显示的话,是不是这样的,是不是这个元素,也就是我们浏览器这个高度的一半,注意浏览器高度的一半是哪是这。
04:11
大概是不是在这儿对吧,那如果是这从这开始的话,那好了,那我这里面就会遇到一个问题,什么问题啊,我的这个东西就应该显在哪了,是不是就显示到这了。是这样的。对不对,哎,所以他光高度一半不行,它应该是高度的一半干嘛呢?我这个位置是不是还要往上样一下,是不这样才能让它居中,也就是说当我这个浏览器高度的一半减去,减去谁呢?减去这个元素高度的一半。是不是就对了,哎,那你相当于比如说当前是这浏览器高德边,比如说是100啊,那是不是就在这个位置了,哎,那在这个位置了,那这个时候我在干嘛呀,把它移动走。移动到这。是不是类似于居中的效果,对吧,我刚才给的有点小了,对吧,我这里边可以给它缩小一下,诶是不是类似到这儿到这儿是不是类似于居中啊,哎,也就是说我这个流当前页面的高度一半减去它的元素的高度的一半,就是什么?就是我居中的位置对不对,那也就是说这里边我要计算的谁呀,计算它高度,注意当前液面高度,液面的高度是不是就是100%。
05:14
对不对,他的一半是就50%。哎,减去谁呢?减去我当前元素元素高度多少,四百四百的一半对吧,也是400PX除以二是不是它的一半。没错吧,那现在咱们来看能不能做到垂直居中,诶,没问题了。对吧,哎,居中在这儿,然后呢,在这里面我还需要干嘛呀,我再给他一个div啊。BV,这个叫做井号Y,我要它有一个高度,有高度的目的是干嘛呢?是为了让它有滚动条啊。hei GT高度为1000皮卡,好了,现在我们再来看啊。刷新。OK,来你看好了,诶你看有滚动条了,不管我怎么拉动是不是都没问题了,你看好了,我在这块,比如说我写个一对吧,这个高度下面我写个二来你看啊算题最顶部看有没有一,有一啊,然后往下拉拉啦啦啦啦啦啦到最下面,最下面这是不是二对吧,我也可以在这里边再给它一个背景颜色b CK bank给他一个。
06:15
这个颜色来。刷新现在你来看吧,你看不管我怎么去拖动,我这个东西是不是都固定到这个位置上来了。哎,这就是咱们的固定定位啊,这是咱们固定定位。好了啊,那固定定位我们看完以后,这里边还有几个取值对吧,那取值有哪些呢?有这个。Left。COP。Right以及botm button啊,也就是说我能上距离顶部对吧,也能距离这个底部,能距离左侧也能干嘛呀,也能距离右侧啊,这几个值都是什么,都是存在的,只是什么,我们看下我们实际使用的需求对不对?来,那left表示什么意思?表示设定,注意只有定位元素才能用这些属性啊。
07:01
定位设定定位元素的水平位置对吧?这个是设定定位元素的垂直位置对吧?然后这里边也一样,这是设定定位元素的水平位置,这个也一样设定。定位元素的垂直位置,那么水平位置这个left表示什么意思?表示是距离左边的。距离对吧,而这个top呢,是距离。顶部的距离啊,还有这个red是距离。右侧的距离,以及这个底部的距离。底部的距离OK啊,这是常用的这四个值啊,四个方向的值,这个lefttop right和另外还有一个什么呢?叫Z杠引,但是它是干嘛呢,设定定位元素Z轴的距离啊,Z轴什么叫Z轴呢?你像比如说在这里边啊,我们浏览器正常是一个平面的对不对。
08:07
啊,这是一个平面,这是什么?这是X轴,这是Y轴对不对,那什么叫Z轴呢?你好比说在这里边,我们拿一根针一根针直线往里边插,是不是就插出了一个这个立体的对不对,那么这根轴就是这一轴,就是这轴啊,其实这轴你不好理解,说白了它什么意思,就是元素的显示顺序。元素呢,显示顺序啊,咱们来看,我给你调整一下你就明白了啊。来,在这里边我们新建一个页面。啊,这段零四啊,定位元素的显示顺序。可乐,哎,好了,比如说这里边div。给他来一个ID,叫做BOX1。
09:00
好,这个叫波斯二。好了,那现在我们来设置它。磁style标签啊,先导div,我们给它一个批量设置宽度,比如说为200,然后高度h he也为怎么样也为200,然后B半径格上呢,我们给它加一个颜色好了,然后再来井号div。井号,Div。还有div,哎,不对,咱叫book是吧,BOOK2。和box。好了,看好了,给他俩你做任意的定位都可以啊,比如说我就了啊,然后left,比如距离左侧100。然后哎,都行top。距离顶部也为100,好,那现在咱们再看第二块呢,第二块是什么颜色,没给呢是吧?WDTF,对,是B半径图上第二块我给它红色啊。然后呢,再来距离顶部距离的话150,然后top也一样一百五啊,左侧跟顶部都是150,现在咱们来看我刷新页面。
10:08
你看他们两个是不是重叠的。对不对,哎,这个红色。哦,红色没有动,是不是红色应该怎么办,是不是给他process等于这个都用了啊好,那现在来刷新,你看是不是过来了,诶过来哦,他以当前位置。换成绝对定位,让他都已浏览器啊。不让它以当前位置以都以这个包代体,这个时候他俩就会重叠对吧,哎,重叠以后现在看红色是不是盖住了这个粉色,因为什么?因为我代码正常的逻辑对吧,这个BOS2本来也比他。后执行他在26行,他在27行对不对,所以我二十六二十七行东西盖住26行很正常,没错吧?哎,那如果说这个红色不想让被他盖住怎么办?我是不是就得把它单独的提到上面来啊。提到上面来,这时候来看诶。
11:04
财刷新,你看这个叫什么,这个叫。粉红色是吧,就盖住了我的红色吧,哎,但是呢,再说了,我的代码一旦写好了,浏览器是从上到下执行的,对不对,所以先执行到它,再执行它的时候,它就会盖住这个二就会盖住一,这很正常对吧?那现在能说了,我不想让二盖住一,我第一种方式我可以通过移动这个元素,但是移动元素对于我们布局而言。我们在布局这个页面,说我们页面中代码会很多,如果一旦你移动了元素,那就。不一定能保证你的元素顺序是对的,对吧,也有可能其他会对其他元素有影响,对吧,那这个时候怎么办,咱们来看。当前BOX2是不是盖住BOX1了,哎,如果BOX1不想被BOX2拜住,可以怎么办呢?可以通过这个引带的这个来属性来设置它的距离啊,设置这个对轴的距离,比如说我让它往起来提一层,往给个一,好比是往前提一层啊,就是浏览器,其实它是有什么呢?它是成的,比如说这一层对吧,两层啊三层。
12:08
四层对吧,从这个角度看,它是有层的,但是我们角度什么,我们是直线的对应看,所以只能看到这一个平面,明白吧,所以当我给了它这个是这个一代为一,代表了什么,现在往前提一升,往前提一升以后,这个时候你看。刷新。我的这个粉红色是不是盖成红色了,对不对,那同样,那比如说。红色要不想让粉红色盖住呢?那只要保证他俩在一层里面,我的红色是不是永远都盖住粉红色了,对不对,所以在这里边,我们这里边换一下别。就直接拼个粉色啊来。好了,粉色啊,那咱们看如果说了这里边,我想让他俩们还是红,这个红色要盖住粉色,我这盖引袋子也一样,给它一只要他俩在一层就能盖住了,对不对,因为默认情况下就能盖住,你看是不是盖住了。没错吧,哎,那如果说我这里边给二呢,给二能不能盖住,是不是也能啊,原本在一层就能盖住,你给的更高的时候是不是都能盖住,对不对,但是我这个。
13:07
粉色粉色这里边,如果我这己那是二能盖住吗?能让粉色盖住红色吗?不行吧,因为这个时候它俩刚在同一层,对不对,如果你想让粉色盖成红色怎么办?我正把它继续加大,变成了,变成三了。是不它才上来,哎,这就是咱们这个引带干嘛呢?设置元素这轴的距离啊,也是元素的显示顺序啊,好了,这就是我们定位属性中需要大家掌握的所有的内容,其中这个绝对定位最重要,这个定位参考点一定要背下来啊好,那这节课我们到这里。
我来说两句