码迷,mamicode.com
首页 > Web开发 > 详细

css固定定位与绝对定位的区别

时间:2018-07-15 11:23:16      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:src   def   charset   ref   bsp   step   type   技术   top   


    1. 绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移,

      固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移。

    2.  

      我们可以用代码来验证代码如下:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>无标题文档</title>

      <style>

      #gd{

      width:500px;

      height:500px;

      background:red;

      position:fixed;

      }

      #jd{

      width:300px;

      height:300px;

      background:blue;

      position:absolute;

      left:400px;

      top:1000px;

      }

      </style>

      </head>

      <body>

      <div id="jd">

      我是绝对定位

      </div>

      <div id="gd">

      我是固定定位

      </div>

      </body>

      </html>

    3.  

      以上代码的效果如下

      技术分享图片
    4.  

    5.  

    6.  

    7.  

      下拉滚动条可以看出固定定位始终保持在左上角并且固定定位显示的优先级高于觉都定位

    8. 总结:固定定位于绝对定位最根本的区别还是偏移基准的不同固定定位是相对于屏幕而绝对定位的基准则是父级元素,而且最好还要注意ie6不兼容固定定位而兼容绝对定位。

css固定定位与绝对定位的区别

标签:src   def   charset   ref   bsp   step   type   技术   top   

原文地址:https://www.cnblogs.com/weikeqi/p/9311717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!