课程：

• 1、简述DIV块定位的四种方式？
• 2、如何使用DIV标签的定位（如何绝对定位和相对定位）
• 3、如何定位DIV
• 4、div的相对定位和绝对定位是什么意思,什么区别啊?
• 5、在css中div定位方式有哪几种

简述DIV块定位的四种方式？

static : 默认值。无特殊定位，对象遵循HTML定位规则

absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义

fixed :未支持。生成绝对定位的元素，相对于浏览器窗口进行定位(与absolute后所不同)。规范就是：元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

inherit :规定应该从父元素继承 position 属性的值。

如何使用DIV标签的定位（如何绝对定位和相对定位）

相对定位和绝对定位

定位标签:position

包含属性:relative(相对)

absolute(绝对)

1.position:relative;

如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。(再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框)

2.position:absolute;

表示绝对定位，位置将依据浏览器左上角开始计算。

绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。)

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角。

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

如何定位DIV

方法一：给div定义好宽度，并添加样式 margin:0 auto;

例：div style="background:red;width:100px; margin:0 auto;"content/div

方式二：给div定义好宽度，并添加样式 position:absolute;left:50%;margin-left:-(div的宽度一半)

例：div style="background:red;width:100px; position:absolute;left:50%;margin-left:-50px;"content/div

div的相对定位和绝对定位是什么意思,什么区别啊?

相对定位和绝对定位是定位的两种表现形式，区别如下：

一、主体不同

1、相对定位：是设置为相对定位的元素框会偏移某个距离。

2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。

二、特点不同

1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

三、表现方式不同

1、相对定位：对一个元素进行相对定位，它将出现在它所在的位置上。可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

2、绝对定位：文本流中的内容会顶替绝对定位元素的位置，而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是被绝对定位后的坐标原点。

参考资料来源：百度百科-CSS相对定位

参考资料来源：百度百科-绝对定位

在css中div定位方式有哪几种

1、position:absolute; 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

2、position:fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位。

3、 position:relative; 生成相对定位的元素，相对于其正常位置进行定位。

4、position:static; 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5、position:inherit; 规定应该从父元素继承 position 属性的值。