关于CSS中Position属性

static和relative的用法比较清晰,在此就不做讨论了,值得注意的是static定位,即默认没有定位的元素忽略 top, bottom, left, right 或者 z-index 声明;而relative定位的元素虽然没有脱离文档流,同样忽略 top, bottom, left, right声明,但是却z-index属性却可以起作用。

昨天主要纠结在absolute和fixed上,老师上课演示了用这两种定位方式将元素的right和bottom设置为0,在元素下方添加很多换行符,打开窗口时两种方式都是位于右下角,区别是当滚动条滚动的时候,fixed定位的元素依然会一直处在右下角,而absolute定位的元素却会停留在初始显示的那个位置,如图:

当时没多想就这么过去了,晚上自己做练习的时候发现上图这种用absolute定位的方式,虽然滚动条动的时候不会跟着走,但是直接用鼠标在窗口边缘拖动窗口大小的时候,却会跟着走,一直位于右下角,这就让我非常费解了。

随后去网上查阅资料的过程中,发现网上很多地方包括百度文库,百度经验上写的都有很基础的错误,很多地方写的都是absolute和fixed是相对于body定位,然而经过测试,如图:(红线为body边框,蓝线为html边框)

可以很清楚的看到,div块的边框是紧靠html标签边框而不是body。那么absolute定位是不是以html标签为基准呢,显然也不是,div下方还有很多换行,并不是紧靠html标签的。

由此可以说明,absolute定位和fix定位都是以浏览器窗口为基准的,我理解的区别是absolute定位是基于窗口的初始状态产生一个绝对定位的坐标,而fixed则是一直锁定在浏览器窗口上,不管窗口如何变化始终满足设定的定位。但是按这样的理解依然不能解释为什么absolute定位下,拖动窗口边缘放大缩小的时候div块会跟着变而不是留在原地。

时间: 2024-10-08 11:20:44

关于CSS中Position属性的相关文章

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t

css中position属性(absolute/relative/static/fixed)

css中position属性(absolute/relative/static/fixed): position:static   无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. position:relative 对象遵循正常文档流,相对的是它原本在文档流中的位置而进行的偏移,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. position:abso

CSS中Position属性

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. relative : 相对于元素自身的定位. absolute :相对于包含块的定位. fixed : 相对于窗口的定位. 2.包含块 包含块就是 top | righ

【拼爹坑爹不比爹】深入理解css中position属性及z-index属性

总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.)2,单一父元素不设值,子z-index才奏效:"不比爹"3,多个父元素,"拼爹坑爹"(子凭父贵,子贵父不贵)(爹设值,因外有body)4,多个父元素多子元素,各父各子高低相互比,就是不比爹:>< [转]深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

css中position属性(absolute|relative|static|fixed)的区别

position属性的相关定义:static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流; fixed:对象脱离正常文档流 我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-

CSS中position属性三大定位方式讲解

Relative Relative的元素相对于它原本的位置来做定位,但是它的位置仍然存在,即使它作了偏移,它周围的元素也不会占领的它的位置.所以,Relative属性的盒子会覆盖其他的盒子,而不是推开其他盒子. 如果一个元素是相对定位(甚至它还做了偏移),它周围的元素在排版时参考的依然是那个元素原本的位置(指在没有偏移时的位置). 如果同时声明top和bottom的值,那么top值的优先级更高.如果同时声明left和right的值,那么优先级取决于网页的语言(例如,英语法语德语西班牙语).比如,

【转】CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

详解css中position属性

最近画富瑞的界面,很多元素的定位都是个问题(在我没有很详细的知道position属性之前) 后来上网查了下关于position的一些相关的属性和用法,遂整理了一下 position:属性:固定元素的定位类型.即元素脱离文档的布局流,在元素的任意位置显示. 关于position的属性值,有四种: 1.static:默认布局(默认值) 2.fixed:固定定位,顾名思义是固定的意思,和absolute定位类似,但是比absolute更"定"!(不随滚动条的滚动而滚动) 3.relative

对CSS中position属性的理解

 ① static(默认值) ② relative:相对于自己本来的位置进行定位.即相对于自己不加position属性的位置定位.移位后同样占有当初的物理空间位. ③ absolute:如果有父元素设定了position属性(relative或absolute)则相对于父元素的父元素的左上角定位.如果没有position属性的父对象,则以body为定位对象,按照浏览器窗口进行定位. ④ fixed:总是以body为定位对象,按照浏览器的窗口进行定位,即使拖动滚动条,位置也不会改变