第五天 定位网页元素
今天是一个制作一个网页需要学的最后一节课
内容也很简单
主要就是对网页内容的定位
使网页在放大或者缩小的时候不会乱成一锅粥。。
其主要使用的是postion属性
position属性主要分为四类:absolute(绝对定位)、raletive(相对定位)、(fixed)固定定位、(static)默认定位
一、absolute(绝对定位)
其代码为
.p{width:20px; heigh:20px background-color:#f00;
position:absolute;top:30px;left:30px;}其意思为一个宽高各为20px的正方形,相对于父级元素,左右各偏移30px。
注意:
1、使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
2、如果没有已经定位的祖先元素,会以浏览器窗口为基准进行定位
3、绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
4、元素位置发生偏移后,它原来的位置不会被保留下来
二、raletive(相对定位)
其代码为
.p{width:20px; heigh:20px background-color:#f00;
position:raletive;top:30px;left:30px;}其意思为一个宽高各为20px的正方形,相对于自己本身,左右各偏移30px。
注意:
1、设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置
2、设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻的盒子都没有任何影响
3、设置相对定位的盒子原来的位置会被保留下来
三、fixed(固定定位)
.p{width:20px; heigh:20px background-color:#f00;
position:fixed;top:30px;left:30px;}其意思为一个宽高各为20px的正方形,固定于距离网页页面顶部30px、左侧30px的位置,固定定位是以浏览器页面为基准的
四、z-index(层次)
position:absolute;
x-index:1;(数值越大,层级越高,默认值为0)
明天就要开始实战写网页了
检验一下几天以来的学习成果
加油!