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

最新推荐文章于 2024-09-24 15:04:24 发布

转载最新推荐文章于 2024-09-24 15:04:24 发布 · 160 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CaseyWei/p/9311717.html

文章标签：

本文介绍了CSS中固定定位和绝对定位的区别，通过实例代码演示了两种定位方式的表现形式及特性，强调了它们的偏移基准不同：固定定位相对于屏幕，而绝对定位则基于最近的已定位祖先元素。

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. 以上代码的效果如下
7. 下拉滚动条可以看出固定定位始终保持在左上角并且固定定位显示的优先级高于觉都定位
  
  步骤阅读
8. 总结:固定定位于绝对定位最根本的区别还是偏移基准的不同固定定位是相对于屏幕而绝对定位的基准则是父级元素，而且最好还要注意ie6不兼容固定定位而兼容绝对定位。

转载于:https://www.cnblogs.com/CaseyWei/p/9311717.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。