1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相对于自己原来的位置,还是会占父元素位置 3.switch--absolute,div相对于父元素的位置(要求父元素必须有位置属性,逐级网上寻找),不占父元素位置 https://segmentfault.com/a/1190000006924181…

position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么…

目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常文档流 加了absolute之后的布局 加上margin/padding/border之后的布局 fixed 固定定位 sticky 粘性定位 注意的点 此文档对应的例子 参考资料 CSS position属性规定一个元素在文档中的定位类型.top,right,bottom和left属性则决定了该元…

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

其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位的相对上下左右的距离,一般写法如下: position:absolute; top:20px; left:20px; 下面我们分情况讨论: 1.父级没有定位属性的情况,用relative和abosolute配合使用,解决一般的定位问题. abosolute:绝对定位,其意义是相对其最近的一个有定位属…

其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位的相对上下左右的距离,一般写法如下: position:absolute; top:20px; left:20px; 下面我们分情况讨论: 1.父级没有定位属性的情况,用relative和abosolute配合使用,解决一般的定位问题. abosolute:绝对定位,其意义是相对其最近的一个有定位属…

<div id="bigbox1">    <div id="box1" class="box">box1</div>    <div id="box2" class="box">box2</div>    <div id="box3" class="box">box3</div>  …

static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index进行层次分级. CSS2.0 HandBook上的解释:         设置此属性值为absolute 会将对象脱离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外边距( m…

absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变.absolute的元素不仅位置改变了,同时也脱离了文档流.所以absolute会把非定位盒子覆盖掉. position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子…

相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:absolute; 脱离文档流,通过top,bottom,left,right定位,选取其最近的父级元素进行定位,当父级元素position为static时,absolute元素将以body坐标原点进行定位,可通过x-index层次分级. 固定定位:position:fixed; 这里他所固定的对象是…