2607次阅读
重要的定位
定位其实就是设置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分别偏移不同的像素，就构成了重影字效果。
如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点赞助
，不要超过100元哦！
，不要超过100元哦！
评论请先登录