html 图片浮层,纯css图片悬浮代码（expression）

最新推荐文章于 2025-03-31 14:19:48 发布

猪猪堂客

最新推荐文章于 2025-03-31 14:19:48 发布

阅读量1.5k

点赞数

文章标签： html 图片浮层

本文详细介绍了CSS中的四种定位方式：static（默认），relative（相对定位），absolute（绝对定位）和fixed（悬浮定位）。重点讲解了它们的工作原理和使用场景，特别是absolute和fixed如何通过left, right, top, bottom属性进行布局，并且提到了IE浏览器对fixed的支持情况。此外，还提供了一个示例来说明如何实现页面角落的固定定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中有以下几种定位方式：static : 静态(默认)，无特殊定位。

relative : 相对定位，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档中偏移位置

absolute : 绝对定位，将对象从文档流中拖出，通过width、height、left，right，top，bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义。 fixed : 悬浮，使元素固定在屏幕的某个位置，它不随滚动条的滚动而滚动。(IE5.5+不支持此属性。)

inherit : 这个值从其上级元素继承得到。举一个悬浮的例子吧：

body{position:relative;} /*左上角*/

.Left_top {left:0;top:0;position:fixed;+position:absolute;top:expression(parseInt(document.body.scrollTop));} /*右上角*/

.Right_top {right:0;top:0;position:fixed;+position:absolute;top:expression(parseInt(document.body.scrollTop));} /*左下角*/

.Left_bot {left:0;bottom:0;position:fixed;+position:absolute;top:expression(parseInt(document.body.scrollTop)+document.body.clientHeight-75);} /*右下角*/

.Right_bot {right:0;bottom:0;position:fixed;+position:absolute;top:expression(parseInt(document.body.scrollTop)+document.body.clientHeight-75);}