position定位问题

最新推荐文章于 2021-12-25 21:21:11 发布

weixin_30879833

最新推荐文章于 2021-12-25 21:21:11 发布

阅读量91

点赞数

原文链接：http://www.cnblogs.com/pyyblogs/p/6017330.html

版权

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>

转载于:https://www.cnblogs.com/pyyblogs/p/6017330.html

weixin_30879833

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position定位问题

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

扫一扫