绝对定位和相对定分解52页PPT
- 格式:ppt
- 大小:4.13 MB
- 文档页数:52
---------------------------------------------------------------最新资料推荐------------------------------------------------------相对定位与绝对定位CSS 定位与定位应用定位一直是 WEB 标准应用中的难点,如果不清楚定位那么可能一些效果将不能实现,即使实现了某些效果,在浏览器的兼容性方面可能也会出现问题,如果理清了定位的原理,那么定位会让网页实现的更加完美。
在网页制作中,例如实现对联广告,这时候就需要设置绝对定位,来实现如图 1 所示的效果。
图 1 对联广告一、 position 的三种定位方式图 1 演示了绝对定位的应用, position 定位属性主要包含 relative 相对定位、absolute 绝对定位和 static 默认定位三种定位方式,下面分别对这三种定位方式进行讲解。
(1) relative 相对定位,相对于文档流原来位置的偏移,原占位大小完整保留。
相对定位常用的属性、值及其含义如下表所示。
定位属性属性值说明定位方式position position:relative; 采用相对定位,相对于本来位置的偏移偏移量 left left:20px; 距离参照物左侧 20px right right: 50px; 距离参照物右侧 50px top top: 10px; 距离参照物顶部 10px,相对定位参照物为元素的本来位置 bottom bottom:100px; 距离参照物底部 100px 一般情况下, right 和 left 或 top 和 bottom 不应同时存在。
1 / 9他们之间有个公式。
left 值等于-right,同样的, top 值等于-bottom,例如:left: 10px; 等价于right: -10px; 。
我们根据上表中对 relative 知识的描述,来看图 2 中相对定位元素第 2 块的特点。