分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

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

发布时间:2023-09-06 02:04责任编辑:苏小强关键词:暂无标签

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

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

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved