第五天 定位网页元素

今天是一个制作一个网页需要学的最后一节课

内容也很简单

主要就是对网页内容的定位

使网页在放大或者缩小的时候不会乱成一锅粥。。

其主要使用的是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）

 

明天就要开始实战写网页了

检验一下几天以来的学习成果

加油！