一、position 的四个值:static、relative、absolute、fixed。 绝对定位:absolute 和 fixed 统称为绝对定位 相对定位:relative 默认值:static 二、relative定位与absolute定位的区别 实例: HTML代码: css代码: 初始效果: 1、relative:相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局 给第二...
区别很简单: 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场合: 1.fixed常用于网站边缘的公司联系方式和快速回到顶部 2.absolute常用于页面 、、、 我们知道,css的position定位属性中,表示绝对定位的有两个值,值absolute与值fixed。 ...
固定定位使用“position: fixed;”设置。 绝对定位使用“position: absolute;”设置。 2、偏移基准不同 固定定位的偏移基准是屏幕(浏览器窗口),而绝对定位的基准则是父级元素。 而且最好还要注意ie6不兼容固定定位而兼容绝对定位
#first{width:200px;height:100px;border:1px solid red;position:relative;margin:40px;padding:40px;}#second{width:200px;height:100px;border:1px solid blue;position:absolute;top:20px;left:20px;}firstsecond 看懂了,祖先类的margin会让子类的absoulte跟着偏移,而padding却不会让子类的absoulte发生偏移。总...
三、绝对布局(absolute):当元素设置了绝对布局,那么该元素的相对参照物就是第一个设置了位置布局的父view,也就是第一个设置了绝对布局、相对布局或者固定布局的父view,如果都是默认的static布局,那么该元素的参照物就是视口,设置了绝对布局的元素会脱离标准文档流,而且不占父view的大小,看下面的例子 ...
fixed:固定定位,相对于浏览器的视图边框,也就是html/body,我们经常用的悬浮窗口,左右对联式窗口,需要利用position:fixed;实现页面的固定,无论浏览器怎么滚动,窗口就在这个位置!!! 有时也会多个配合使用,例如: 1、父级盒子用了:relative,里面的子元素用了absolute,这样的话,这个子元素是相对于父级元素的,relative...
固定定位:position:fixed 不占据空间,固定定位是脱离标准流。 以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系。 不随滚动条滚动 粘性定位:position:sticky 以浏览器的可视窗口为参照点移动元素。 占有原先的位置。 必须添加top、left、right、bottom其中一个才有效。
absolute/fixed和float对比 类似:元素都会从文档流删除,但是依旧会影响布局;都会生成一个块级框,无论原来是不是块级元素。 区别:float的包含块是最近的块级祖先元素。 偏移属性:top/right/bottom/left,初始值是auto。 采用position定位之后必须采用偏移属性定义偏移量,也...
他们俩是最像的,也是最容易搞混的。都是不占坑,可偏移,唯一的区别就是定位原点不同:absolute是以父节点左上角来定位,而fixed永远以浏览器的左上角为准。如果父级节点就是浏览器,那么他们就会完全重合。 重要性 position四个属性中,relative和absolute最长用,所以一定要重点观照,搞清楚他们的特性,原点是谁,生效前...