玩命牛的成长记录（六）——重要的定位

来源：互联网发布：xml文件编辑软件编辑：程序博客网时间：2024/06/05 11:47

欣欣（1989—）

自动化专业研究生，转行当程序员，在一家国内领先的IT公司工作，业余时间兼职创业，创办网站欣欣网站制作。

玩命牛（1989—）

欣欣的本科同学，学习非常玩命，本科毕业后去了一家小公司，干得并不称心，正准备转行IT，听说本科同学欣欣正在兼职互联网创业，特邀他一起合租，同时加入了兼职创业的队伍。

重要的定位

定位其实就是设置style里面的position，默认是static，也就是我们之前的例子得到的那种效果。还有比较重要的是relative和absolute。要仔细分析下。

relative是相对定位，我们可以先来看个例子：

<!DOCTYPE html><head><meta charset=utf-8 /><title>重要的定位</title><style>.box {width : 100px;height : 100px;background-color : pink;float : left;margin-right : 20px;}.relative {position : relative;top : 30px;left : 10px;}</style></head><body><div class="box">div1</div><div class="box relative">div2</div><div class="box">div3</div></body>

check the result

这就是relative，第二个盒子设置了position为relative，就可以设置他的left和top属性，它对相对于它原来的位置进行偏移。但是要注意到，这对其他两个盒子的位置没有影响。我们再看看绝对定位，absolute：

<!DOCTYPE html><head><meta charset=utf-8 /><title>重要的定位</title><style>.box {width : 100px;height : 100px;background-color : pink;float : left;margin-right : 20px;}.absolute {position : absolute;top : 30px;left : 10px;}</style></head><body><div class="box">div1</div><div class="box absolute">div2</div><div class="box">div3</div></body>

check the result

这个结果有没有看懂？绝对定位的时候，div2的left和top就不是相对于它原来的位置了，而是相对于body这个元素，同时，它原来的位置也不复存在，div3会紧接着排在div1后面。

很奇怪，为什么绝对定位会相对于body，其实他并不是相对于body，而是相对于离它最近的定位为非static的元素，举个例子：

<!DOCTYPE html><head><meta charset=utf-8 /><title>重要的定位</title><style>.bigbox {width : 300px;height : 300px;background-color : gray;float : left;margin : 50px;}.box {width : 100px;height : 100px;background-color : pink;float : left;margin-right : 20px;}.relative {position : relative;}.absolute {position : absolute;top : 30px;left : 10px;}</style></head><body><div class="bigbox"><div class="box">div1</div><div class="box absolute">div2</div><div class="box">div3</div></div><div class="bigbox relative"><div class="box">div1</div><div class="box absolute">div2</div><div class="box">div3</div></div></body>

check the result

这个例子可以很好地说明问题，第一个bigbox没有设置position，默认是static，里面的子元素div2不会相对它计算，会再往上找非static的父元素，找到body。而第二个bigbox设置了position为relative，所以里面的子元素div2就会相对于它来计算。

定位可以用来作点啥呢？只要开动大脑，很多东西都能做出来。

<!DOCTYPE html><head><meta charset=utf-8 /><title>重要的定位</title><style>.bigbox {width : 300px;height : 300px;}.bigsize {font-size : 40px;font-weight : bold;}.relative {position : relative;}.absolute {position : absolute;}.one {left : 0px;top : 0px;}.two {left : 1px;top : 1px;}.three {left : 2px;top : 2px;}.four {left : 3px;top : 3px;}.five {left : 4px;top : 4px;}</style></head><body><div class="bigbox relative"><span class="absolute bigsize one">重影字效果</span><span class="absolute bigsize two">重影字效果</span><span class="absolute bigsize three">重影字效果</span><span class="absolute bigsize four">重影字效果</span><span class="absolute bigsize five">重影字效果</span></div></body>

check the result

将5个字的top和left分别偏移不同的像素，就构成了重影字效果。

0 0