1.相对定位的原理与案例

一 相对定位的原理与案例

定位

1.四种模式:static,relative,absolute,fixed

2.四个位置:left,right,top,bottom

定位属性:position,有四种状态值

1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效

2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效

3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效

4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效

静态定位不再学习，它就是默认文档流定位

相对定位

原始结构：

效果：

相对定位实验：

relative:相对定位,是相对于元素原来位置进行移动,仍在文档流中

relative一定要配合定位属性才可以正常工作

让第一个div块移动到距离顶部，左侧50像素的位置

说明：红色框线是原来蓝色区块的位置，这个位置并没有释放，蓝色区块相对于原来的位置向下向右移动了50像素

还原到原始结构，做一个相对定位的小案例：十字架

目的：通过相对定位实现区块的移动

蓝色区块顶部不变，距离左侧200px

绿色区块不需要动

红色区块要到图示位置需要相对于原来的位置向右走200px

代码：

效果：

棕色区块要到达图示位置，需要向右向上走400px

代码：

效果：