css relative 相对布局初识

html-css013

css relative 相对布局初识,第1张

第一种基本情况:没有使用position left 和 top设置属性无效.

效果图如下 符合文档流的基本顺序:

第二种情况 取消注释 position:relative

效果图如下:发现div根据设置的left和top发生了偏移 但是span 还是为什么span的位置这么奇怪呢?

因为设置 relative 并不会脱离文档流.举例例子:

设置relative你可以想象一下，这个div是个飞机，从停机坪飞起来，飞到别的地方去了。但是。。这个停机坪还是要给他留着的，否则飞不回来了

虽然div 设置了left和top的偏移,但是它原来的位置还是进行了保留.等待它飞回的那一刻.而span则保持原来的状态没有发生变化.

第三种情况:设置position : absolute

效果图如下: 这里设置absolute ,发现span 跑到文档的开始位置了.

因为设置absolute 会使div脱离文档流.两个保持这样的位置还有就是div 设置top和left的偏移.

| | |

----|------|-----|

static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。|

relative| 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。|

absolute| 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |

fixed|位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。|

另外:

材料/工具：电脑、CSS3、HTML5、HBuilder、浏览器、截图工具

1、双击打开HBuilder编辑工具，新建静态页面position.html，修改title标签内的内容。

2、在<body></body>标签元素内插入一个<div></div>标签，设置其id属性值为pos。

3、利用ID选择器设置div元素宽度和高度都为300px，背景色为#666666，position为absolute。

4、保存代码并预览界面，发现页面展示的正方形边框在左上角。

5、修改top、left、margin和padding，让div元素垂直居中。

6、设置div标签元素border-radius和background渐变属性即可。

可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {

  position: relative

  left: 30px

  top: 20px

}