css中postion的fixed与absolute区别详解

时间:2022-01-08 22:41:04

fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px)

absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角

举个例子:

<div style="posistion:relative" id="p1">
<div style="posistion:fixed" id="p2">
<div style="position:static" id="p3">
<h2 style="postion:absolute;left:10px;top:10px">我的参照坐标是id=p2</h2>
</div>
</div>
</div>

通过上面的例子,可知h2的绝对定位参照点是id=p2的父元素,p3是静态的static定位,不能当作定位点。

css中postion的fixed与absolute区别详解的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...

  3. CSS中padding、margin、bordor属性详解

    一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...

  4. JQuery中&dollar;&period;each 和&dollar;&lpar;selector&rpar;&period;each&lpar;&rpar;的区别详解

    PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...

  5. jsp中的&commat;include与jsp&colon;include区别详解

    1 前言 搞java开发的人也许都知道在jsp中引入项目中其他文件有如下两种方式 <%@include file="xxx.jsp"%> <jsp:include ...

  6. JS中escape&lpar;&rpar;、encodeURI&lpar;&rpar;、encodeURIComponent&lpar;&rpar;区别详解

    avaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decode ...

  7. php中const与define的使用区别 详解

    1.const用于类成员变量定义,一旦定义且不能改变其值.define定义全局常量,在任何地方都可以访问. 2.define不能在类中定义而const可以. 3.const不能在条件语句中定义常量 i ...

  8. java中&equals;&equals;和equals和hashcode的区别详解

    一.相同点 都是用来进行值或对象的比较. 二.不同点 对于“==”而言,对于基本类型(char,byte,short,int,long,float,double,boolean),对比的是值,所以是相 ...

  9. css中zoom和transform&colon;scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

随机推荐

  1. sql 语法

    CASE ISNULL(b.enddate , '2000-1-1') WHEN '2000-1-1' THEN '未发稿' ELSE '已经发稿' END 如果时间为空,则显示为值‘200-1-1’ ...

  2. QTableWidget简单操作

    使用Qt设计师工具,在窗体上添加Table Widget控件,这样就可以使用ui全局变量来调用该控件了. Table Widget控件的应用 (1)设置列数和行数 //设¦¨¨置?列¢D数ºy和¨ª行 ...

  3. codeforces gym 100463I Yawner

    //这题挂得让我怀疑我最近是不是做了什么坏事 题意:一个人有两个集合,先在其中一个集合选一个数x,然后向右走x布,然后再在另一个集合里选一个数y,向左走y步,问是否能走完数轴上所有点. 解:显然是求g ...

  4. c&sol;c&plus;&plus;处理参数

    直接上代码:涉及函数getopt(),getopt_long() #include <unistd.h> #include <stdlib.h> #include <st ...

  5. Maven的pom&period;xml文件详解------Build Settings

    根据POM 4.0.0 XSD,build元素概念性的划分为两个部分:BaseBuild(包含poject build和profile build的公共部分,见下)和poject buil   &lt ...

  6. 学用纯CSS打造可折叠树状菜单

    随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...

  7. CentOS 安装 Python3

    CentOS 7 默认安装 python 2.7.5 如图: 开始安装Python 3.6.3 1.下载Python3.6.3包:  拉到最下面,找到对应的包.复制下载链接地址: wget https ...

  8. openstack 部署笔记--glance

    控制节点 创建用户及服务 $ . admin-openrc $ openstack user create --domain default --password-prompt glance $ op ...

  9. 如何解决The underlying provider failed on Open问题

    转自codeproject,找了半天解决办法,这个最靠谱. 我数据库用的EF做ORM,在vs里面测试的时候不会出现这个错误,用IIS就出错了.解决方法如下 Solution for "The ...

  10. robot自动化分层设计

    robot framework框架分层设计