1090次阅读
重要的定位

定位其实就是设置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元哦!
评论请先登录