position基本的值有五个:static、fixed、relative、absolute、inherit static 是默认值。就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定position,也就表示使用static。 relative 没有脱离文档流,此时可以使用top、bottom、left、right属性。 top 和 bottom 共存时,使用top值,忽略 bottom值; left 和 right 共存时,使用left 值,忽略 right值; relative是相对位置,指相对于元素的position为 static 时的位置; top 相对于static下移多少像素(若top为负值,则上移) right 相对于static左移多少像素 (若right为负值,则右移) bottom 相对于static 上移多少像素 (若bottom为负值,则下移) left 相对于static右移多少像素 (若left 为负值,则左移) 使用relative之后: 原来的空间不会被其他元素挤占 元素在最终位置时也不会挤占其他元素的空间,它浮动到其他元素的上方。 absolute 脱离布局流,此时可以使用top、bottom、left、right,但这些属性不再是相对于static时的位置,而是相对于containing block 的,相对于其边框内边缘的,而不是其padding内边缘。 使用absolute之后: 原来的空间会被其他元素挤占 元素在最终位置时也不会挤占其他元素的空间,它浮动到其他元素的上方。 fixed 他的模式与absolute相同,不过无论怎么拖动滚动条,他始终固定在屏幕的指定位置。在IE6中不支持这个属性;在IE7中支持这个属性但需要指明DOCTYPE;Firefox等浏览器支持这个属性。 top、bottom、left、right属性值指相对于视口的。 inherit 继续父元素的position值。 名词解释 视口-通过解析文档,连续媒体(比如屏幕就是连续媒体,而打印机则是基于页的媒体)给用户产生一个视口(一个窗口或其他在屏幕上显示的区域)。
position的static、relative、absolute、fixed、inherit
最新推荐文章于 2024-04-14 16:15:33 发布