position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么…
其实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:绝对定位,其意义是相对其最近的一个有定位属…
相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:absolute; 脱离文档流,通过top,bottom,left,right定位,选取其最近的父级元素进行定位,当父级元素position为static时,absolute元素将以body坐标原点进行定位,可通过x-index层次分级. 固定定位:position:fixed; 这里他所固定的对象是…
1.switch--fixed,div脱离父元素,top,left,right,bottom都是相对于body,自己原来的位置不存在,即不占父元素位置了 2.switch--relative,div相对于自己原来的位置,还是会占父元素位置 3.switch--absolute,div相对于父元素的位置(要求父元素必须有位置属性,逐级网上寻找),不占父元素位置 https://segmentfault.com/a/1190000006924181…
目录 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…
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义:在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(…
position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定位,而初始包含块并不是以<html>或<body>进行定位的.w3c关于包含块及初始包含块的定义 我们可以做一下测试: <!DOCTYPE html> <html lang="en"> <head> <meta charse…
 第九章: 网页元素定位Position position属性 static:默认值,没有定位 relative:相对定位 absolute:绝对定位 fixed:固定定位  (一般不用) static没有定位,以标准流方式显示 relative设置相对定位的盒子会相对它原来的位置,通过指定偏移,到达新的位置.设置相对定位的盒子仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 设置了position属性值为relative的网页元素,无论是在标准流中还是在浮动流中,都不会对它的父级元素和相…