position定位问题

position属性规定了元素的定位类型，默认为static。
该属性还可以有下值：
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
inherit：规定应该从父元素继承 position 属性的值。

 

  <style>
      
      body{
          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/
      }
      .test-div{
          position:fixed;
          left:50px;
          top:50px
      }
 
      .out-div{
          width: 300px;
          height: 300px;
          background: purple;  /*这里定义个背景，让我们知道这个div在哪*/
          margin:50px 0px 0px 50px;
          position: relative
      }
      .in-div{
          position:absolute;
          left:50px;
          top:50px
      }
  </style>
  <body>
  <div class="test-div">Hello World</div>
  <div class="out-div">
      <div class="in-div">Hello World</div>
  </div>
    </body>

 

posted @ 2016-10-31 20:57  yingyingP  阅读(114)  评论(0)  编辑  收藏  举报