1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了

2.switch--relative,div相对于自己原来的位置,还是会占父元素位置

3.switch--absolute,div相对于父元素的位置(要求父元素必须有位置属性,逐级网上寻找),不占父元素位置

https://segmentfault.com/a/1190000006924181

对于position:relative,absolute,fixed的见解:的更多相关文章

  1. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  2. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  3. What is the difference between position: static,relative,absolute,fixed

    What is the difference between static,relative, absolute,fixed we can refer to this link: expand

  4. css的定位，relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  5. CSS之定位，relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  6. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  7. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  8. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  9. CSS定位：相对定位、绝对定位和固定定位（relative absolute fixed）

    相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...

随机推荐

  1. blockchain notes

    1. IBM blockchain platform https://www.ibm.com/blockchain/platform/ 2. 开源项目hyperledger https://hyper ...

  2. JAVA中mark()和reset()用法

    根据JAVA官方文档的描述,mark(int readlimit)方法表示,标记当前位置,并保证在mark以后最多可以读取readlimit字节数据,mark标记仍有效.如果在mark后读取超过rea ...

  3. 21. Date 函数

    SQL 日期 当我们处理日期时,最难的任务恐怕是确保所插入的日期的格式,与数据库中日期列的格式相匹配. 只要数据包含的只是日期部分,运行查询就不会出问题.但是,如果涉及时间,情况就有点复杂了. 在讨论 ...

  4. HttpSession相关API

    //获取Session对象 request.getSession() request.getSession(boolean create) //获取SessionId getId() //获取当前se ...

  5. httpd和apache的区别

    今天要配置集成服务器环境 apache + tomcat + php + jsp + mysql  + sqlserver 去下载apache 发现有: apache_2.2.14-win32-x86 ...

  6. Input的size与maxlength属性的区别

    最近做项目用到input的size和maxlength属性,以前只顾用没有用心去看看这2个标签的区别,今天周末baidu了一下,有所理解.特记录于此!   <p>Name: <inp ...

  7. Cannot resolve the collation conflict between "Chinese_PRC_CI_AS" and "SQL_L及由于排序规则不同导致查询结果为空的问题

    报错:Cannot resolve the collation conflict between "Chinese_PRC_CI_AS" and "SQL_L 出错原因: ...

  8. Long-Polling, Websockets, SSE(Server-Sent Event), WebRTC 之间的区别与使用

    1.首先看下最简单的SSE: 只用支持SSE的浏览器(大部分)即可,浏览器内置EventSource对象,该对象默认隔三秒刷新一下response的数据. HTML代码(取自w3cschool): & ...

  9. js中的arguments 参数

    function sum (a,b) { } //1,2 为实参 3,4 为形参 sum(1,2,3,4) 打印参数长度 arguments.length 函数实参长度 函数名.length

  10. 个人JS体系整理（三）

    一. 严格模式 JavaScript 严格模式(strict mode)即在严格的条件下运行.首先声明,严格模式是ES5中提出来的,准确来说就是一句指令Use strict,它的目的是指定代码在严格条 ...