《绝对定位 position区别》由会员分享，可在线阅读，更多相关《绝对定位 position区别（6页珍藏版）》请在金锄头文库上搜索。
1、绝对定位：position: absolute;语法：有如下两种情况1，没有设定 Top、Right、Bottom 、Left 的情况，默认依据父级的“内容区域原始点”为原始点 2，有设定 Top、Right、Bottom 、Left 的情况，这里又分了两种情况如下： (1)，父级没 position 属性，浏览器左上角 (即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom 、Left 属性决定 (2)，父级有 position 属性，父级的 “坐标原始点” 为原始点 相对定位：position: relative; 参照父级的“内容区域原始点”为原始点，无父级则
2、以 Body 的“内容区域原始点”为原始点，位置由 Top、 Right、Bottom 、Left 属性决定，并且会在父块以外占据相同的大小，所以不推荐使用。无论相对定位或绝对定位有一点需要注意的就是left 和 right 只能设置一个top 和 bottom 也只能设置一个CSS 之 Position 详解 CSS 的很多其他属性大多容易理解，比如字体，文本，背景等。有些 CSS 书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS 中主要难以理解的属性包括盒型结构，以及定位。正如 positioniseverything，本文将主要讲述关
3、于 position 的理解，力求让您看完本文后对 position 有着最全面的认识。position 的四个属性值：1. relative 2. absolute 3. fixed 4. static 下面分别讲述这四个属性。sub1sub21. relativerelative 属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1 和 sub2 是同级关系，如果设定 sub1 一个 relative 属性，比如设置如下 CSS 代码：#sub1position: relative;padding: 5px;top: 5px;left: 5
4、px;我们可以这样理解，如果不设置 relative 属性，sub1 的位置按照正常的文档流，它应该处于某个位置。但当设置 sub1 为的 position 为 relative 后，将根据 top，right，bottom，left的值按照它理应所在的位置进行偏移，relative 的“相对的”意思也正体现于此。对于此，您只需要记住，sub1 如果不设置 relative 时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。随后的问题是，sub2 的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为 sub1 增加了 position 的属性而发生改变。如果此时把 sub
5、2 的 position 也设置为 relative，会发生什么现象？此时依然和 sub1 一样，按照它原来应有的位置进行偏移。注意 relative 的偏移是基于对象的 margin 的左上侧的。2. absolute这个属性总是有人给出误导。说当 position 属性设为 absolute 后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是 fixed 属性的特点。当 sub1 的 position 设置为 absolute 后，其到底以谁为对象进行偏移呢？这里分为两种情况：（1）当 sub1 的父对象(或曾祖父，只要是父级对象)parent 也设置了 position 属
6、性，且position 的属性值为 absolute 或者 relative 时，也就是说，不是默认值的情况，此时 sub1按照这个 parent 来进行定位。注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以 parent 的哪个定位点来进行定位呢？如果 parent 设定了 margin，border，padding 等属性，那么这个定位点将忽略 padding，将会从 padding 开始的地方(即只从 padding 的左上角开始)进行定位，这与我们会想当然的以为会以 margin 的左上端开始定位的想法是不同的。接下来的问题是，sub2 的位置到哪里去了呢？由于当 po
7、sition 设置为 absolute 后，会导致 sub1 溢出正常的文档流，就像它不属于 parent 一样，它漂浮了起来，在DreamWeaver 中把它称为“层 ”，其实意思是一样的。此时 sub2 将获得 sub1 的位置，它的文档流不再基于 sub1，而是直接从 parent 开始。（2）如果 sub1 不存在一个有着 position 属性的父对象，那么那就会以 body 为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。3. fixedfixed 是特殊的 absolute，即 fixed 总是以 body 为定位对象的，按照浏览器的窗口进行定位。4. staticpos
8、ition 的默认值，一般不设置 position 属性时，会按照正常的文档流进行排列。对于页面中一个 static 的 div#demo，我想让这个#demo 里的一个 div#sub 相对于#demo 定位在右上角的某个地方，应该是用这个 position:relative 这个吧，然后再加上 top,right 给限制一下。 我理解得没有错吧? 首先对你疑惑的地方，我先解答一下： position 的默认值是 static，（也就是说对于任意一个元素，如果没有定义它的 position 属性，那么它的 position:static） 如果你想让这个#demo 里的一个 div#sub
9、相对于#demo 定位在右上角的某个地方，应该给#demo 相对定位，#sub 绝对定位。 absolute 是相对于自己最近的父元素来定位的，如果你不给#demo 相对定位，那么#sub 的绝对定位就是相对于 body 来定位的。 relative 是相对于自己来定位的，例如：#demoposition:relative;top:-50px;,这时#demo 会在相对于它原来的位置上移 50px。 另：relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute 的元素不仅位置
10、改变了，同时也脱离了文档流。 写了个例子如下： Html 代码 1. 2. 3. 4. 5. 6. position 7. 8. 58. 59. 60. 61. 62. static: 默认值。无特殊定位，对象遵循 HTML 定位规则 63. absolute: 将对象从文档流中拖出,使用 left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body 对象。而其层叠通过 z-index 属性定义 64. fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 65. relative:对象不可层叠，但将依据left,right,top,bottom 等属性在正常文档流中偏移位置 66. 67. 68.
