专栏首页luxixingcss中postion的fixed和absolute区别

css中postion的fixed和absolute区别

一直对positon的几个定位方式不是特别理解,记录下

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定位,不能当作定位点

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Yii2 框架核心概念之属性(手册翻译)

    在PHP里,类的成员变量也被称之为属性,这些变量是类定义的一部分,被用来表示类实例的状态(区分不同类实例)。在具体的实践中,你可能要经常处理可读或者可写属性的特...

    luxixing
  • Golang 基础语法-高级数据类型

    本文主要介绍 golang 内置数据类型的 array, slice, map。这几种数据类型在日常使用中是非常常见的。

    luxixing
  • Java 新手入门需要关注的一些问题

    luxixing
  • 原生JS实现翻书特效

    越陌度阡
  • 移动端上上(transform-translateZ注册)

    用户7873631
  • CSS 定位布局 - 相对、绝对、固定三种定位

    文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据...

    Devops海洋的渔夫
  • css的position定位详解

    iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

    十月梦想
  • 《静儿的服务治理私房菜》网络模型的分类和职业规划思考

    静儿
  • 13、backbone实战:webchat(二)详细设计

    the5fire
  • 前端day12-JS(WebApi)学习笔记(操作元素属性,事件介绍)

    硬盘代码读取到内存 -> 浏览器渲染引擎生成DOM树(document) -> 开始渲染页面

    帅的一麻皮

扫码关注云+社区

领取腾讯云代金券