博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css固定定位与绝对定位的区别
阅读量:5889 次
发布时间:2019-06-19

本文共 850 字,大约阅读时间需要 2 分钟。


    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不兼容固定定位而兼容绝对定位。

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

你可能感兴趣的文章
简单够用的设计
查看>>
luogu P1387 最大正方形
查看>>
Android图片圆角效果
查看>>
WeChat Official Account Admin Platform API Introduction
查看>>
C语言写单链表的创建、释放、追加(即总是在最后的位置增加节点)
查看>>
poj1635
查看>>
C# LINQ详解(一)
查看>>
视频直播点播nginx-rtmp开发手册中文版
查看>>
ruby学习总结04
查看>>
Binary Tree Paths
查看>>
Ueditor自定义ftp上传
查看>>
线程以及多线程
查看>>
PHP队列的实现
查看>>
单点登录加验证码例子
查看>>
[T-SQL]从变量与数据类型说起
查看>>
稀疏自动编码之反向传播算法(BP)
查看>>
二叉搜索树转换成双向链表
查看>>
WebLogic和Tomcat的区别
查看>>
java类中 获取服务器的IP 端口
查看>>
occActiveX - ActiveX with OpenCASCADE
查看>>