CSS定位
CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么。
在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些“内涵”!所以会出现一些明显的错误,也不知道怎么去修正它,那么下面我们就来介绍一下,这个定位究竟怎么用才好呢。
因为是演示,老师的CSS会采用内联、内嵌,比较方便(同学们以后的项目中,一定要采用外联,高效安全)。
定位属性:position
值:relative(相对定位)、absolute(绝对定位)、fixed(固定定位)
我们先来看看相对定位:
HTML:
<div id="div1">我是定位,相对定位</div>
CSS:
#div1{ position: relative; background-color:#dedede; }
经过前面的几篇学习,或者了解了WEB前端的HTML和CSS,这里的代码就不再解释了,给背景色就是为了方便看出效果。我们给了div的样式,让它变成“相对定位”了,页面上是没有任何效果的,而要它发生“定位”改变,就要再使用两个属性,left和top,学习过盒子的同学,这两个代码的意思应该是明白的。但是我们这里不是写成"margin-left"或者"padding-left",更加不是"position-left",而是单单的给出"left"属性后面再跟值,就可以了。
#div1{ position: relative; background-color:#dedede; top:20px; left:50px; }
刷新页面,能够清楚看到效果,这个div距离页面顶部20px,左侧50px。那么还有一个问题,有多少同学注意到了?页面最低端,出现了一个滚动条!那么是为什么呢?
我们并没有给div设置宽度,它是块级元素,所以默认情况下,它的宽度,是占据整个页面的宽度的。我们设置了它的定位为“相对定位”,它的宽度依旧会是页面宽度,你让它距离左侧(left)50px,他移动过去了,但是宽度依旧不变,所以它这一行可以理解为:当前页面宽度(1920px)+50px(left),就大于了页面本身宽度,所以下面就出现了滚动条。这就是相对定位。
相对定位还有一个特性,我们再在id为div1下面加一行代码测试一下:
<div id="div1">我是定位,相对定位</div> <div id="div2">我不是定位,没有任何属性,看我位置</div>
为了区分,在div1下面添加一个div2,同学在页面上测试代码会发现,它们的位置...是同行的,如果将div1里面的top值20改成50呢,试试效果:
#div1{ position: relative; background-color:#dedede; top:50px; left:50px; }
这样的话,div1就在div2的下面去了,而且还能完全的看到div2的所有内容。之前的内容只能看到几个字,后面的都被div1挡住了,这里就关系到了层次。
同学们还发现没有,div1的位置改变了,但是div2依旧是基于它夸了行,没有占用div1原本的位置,也没有因为div1移动了top:50px 而往下面走。div2的位置就等于是,就是基于了div1原本的位置下方跨了一次行。
这里就是“相对定位”的特性,它虽然使用了left和top改变了位置,但是它本身占用的位置是不会改变的,其他的元素也不能占用它本身的位置。
我们可以再来试一下相对定位,这个位置是不是真的,别的元素不会占用,那么我们给它设置一个高:
#div1{ height: 200px; }
在div1里加一个高,那么效果就会发生改变,div2也会跟着往下面走,是因为,它没有“移动”,它的div元素是在div1下面的,就会一直基于div1跨一次行,跟着老师做到这里,有同学疑问,div2的内容又被压着了,怎么看到全部的内容呢?“position”定位,它还有一个属性:z-index 层次,它的值为数字,可以为负数,不需要单位:
#div1{ z-index: -1; }
给div1设置了层次为负1,在页面上,不设置z-index的情况下,所有的元素z-index都可以理解为默认0,而设置了postion的会比没有设置position的高,所以div1才会压着div2,而现在div1层次设置成了负数,div2就可以压着它了,其他元素也会压着,这就是层次,立体模型一样。再说一次,只有设置了position的元素,才可以设置z-index,否则无效哦。
绝对定位:
这个定位好用,但是不推荐用,老师学习的时候,几乎全部用它,但那是错误的!!!
绝对定位,它的“内涵”,会使这个元素脱离文本,比如看看这个代码:
HTML:
<div id="div3">我是绝对定位</div>
CSS:
#div3{ position: absolute; }
我们能够发现,它不会改变对吧,但是我们写定位,其实也就是希望它的位置发生改变,那么我们再加两行代码:
#div3{ top:10px; left: 10px; }
在div3里面,我们加上这两行代码,让它发生位移,同学们会看到,它怎么跑到div1和div2上面去了呢?如果说是相对定位,或者说用内外边距,它也应该是在div1和div2下面距离10px,但是这里,它却在最顶端上了。
我们刚刚说到,绝对定位,它会脱离文本,可以理解为,它不在被其他元素影响,而成为一个独立的,只会基于页面最顶端和左侧发生位移。
看到这里,有同学肯定高兴,那用绝对定位多好,全盘用它来改变位置。确实,老师曾经就这样用过,但是老师问问同学们,你的分辨率宽度固定1920px,你让1个10个N个元素成为绝对定位来位移,那么这只是你的电脑而已,那么如果别人的电脑分辨率只有1024px呢?你某一个元素位移1500px,那么人家1024px的电脑看得到吗?有同学说,会跟相对定位一样,下方出现滚动条。让我们来试试:
#div3{ left: 2000px; }
将上面的代码,left改成2000px吧,这样测试的更直接,因为同学们基本上用的都是小于等于1920px的分辨率吧!
效果会怎么样呢?确实,出现了滚动条,我们往右侧拉,会看到什么呢?因为它超过了浏览器最大分辨率,所以它的内容变成了垂直显示了。
那么出现这种情况,同学们一定要觉得很严重,因为你想啊,人家的分辨率若比你的小,那内容不都变样了?还有我们再在div3下面加一个div4试试,先将div3的top和left都设置成0px,设置成0的话,它们就会跑到基于页面左上角去了。不设置的话,就会回到原本的位置上去。
我们在div3下面加一个div4:
<div id="div4">普通的div,什么都不设置</div>
同学能看到,div3确确实实跑到了页面的左上角去了对吧,而div4也在div2下面!为什么是在div2下面呢?因为div3设置成了绝对定位,它原本的位置,已经消失了,所以div4能够占用它的位置,这里就能区分相对和绝对的一个区别。然后我们再将div3的left和top取消,记住是取消掉哦,就是删除它这两个属性。
删除后,大家能看到,它回到了它原本的位置(div2的下面),但是问题来了,它和div4重合了。是因为div3成了绝对定位,div4就直接顶替了它的位置,即使div3回来了,它也只是漂浮在页面上的,不会被其他元素影响,也不会影响别的元素。同学们觉得,这样方便管理吗?我们二次开发的时候,难道别人也要跟着你一样,全盘用绝对定位吗?还有之后的“响应式布局”,不同分辨率不同效果,对吗。
那绝对定位不推荐用,要它干嘛?老师也觉得,但是它还有一个非常重要的用处,可以使它不基于浏览器左上角,而是基于它的“父亲元素”,什么是父亲元素呢?又怎么让绝对定位有父亲元素呢,看下面的代码:
HTML:
<div id="div5"> 我是父亲元素,我还是相对定位 <div id="div5-1"> 我是绝对定位,我是div5的下一代 </div> </div>
CSS:
#div5{ position: relative; width: 500px; height: 300px; background-color: aqua; } #div5-1{ position: absolute; left: 20px; top:5px; }
我们去页面测试,同学们能看到,div5-1 这个元素div块,它没有跑到离开div5对吧,更没有跑到页面左上角,是因为它的父亲元素影响到了它,而它的父亲元素,必须设置成相对定位,才能影响它。如果div5不是相对定位,或者没有设置定位,那么div5-1会直接不承认div5是它的老爸,直接离家出走,跟着浏览器的左上角跑,真的哦。
这里的效果,同学们看到没有,老师给div5-1设置的top只有5px,它还跟父亲元素的内容重合了,是因为什么呢?它确实是基于它父亲发生了位移,但是它基于的是,它父亲的左上角,我们可以再加一行代码和改动一下left、top试试:
#div5-1{ position: absolute; left: 0px; top:0px; background-color: red; }
给div5-1加一个背景色,容易区分嘛,然后top和left都改成0,可以看出效果,它确确实实是基于父亲元素的左上角对吧!一点问题都没。
这中绝对定位和相对定位搭配的方法,以后也会常用到的。
固定定位:
这个固定定位也就经常用到了!同学们看到,固定,它是固定的。经常用到哪里呢?想是导航栏,你页面不管这么上下滑动,左右滑动,它都不会改变位置,永远在哪里,所以说,它更多用来做导航栏呢!
我们写一段代码玩玩:
HTML:
<div id="div6">我是固定定位</div> <div style="height:2000px;我高度2000px,是为了测试固定定位</div>
CSS:
#div6{ position: fixed; }
仅仅这样的代码,大家能够滑动一下试试,这个div6的内容,是不是你上下滑动,它永远都在那个位置,而且它和绝对定位是一样的,脱离了文本,不和其他元素相互产生影响。我们给它加一个top和left,看看它是否基于页面的左上角呢!
#div6{ position: fixed; top: 0; left: 0; }
测试的同学能够看到很明显的效果,它确实也是基于页面的左上角的!和绝对定位一样。有同学发问,既然是一样,那么它是不是也能够设置绝对定位作为父亲,答案是:不会,它不会承认别人是它的父亲,一样的跑到页面左上角去,同学可以自己测试一下,加深印象!
三个定位都演示完了,还有不懂的同学,请在下方发问。