课程：

• 1、div 绝对定位
• 2、如何使用DIV标签的定位（如何绝对定位和相对定位）
• 3、怎么让一个DIV绝对定位到页面的正中间
• 4、怎么样实现DIV的绝对定位

div 绝对定位

id为a的元素使用相对定位，div写在a元素里面进行绝对定位

当然，选其他地方来相对定位也一样，控制好left top位置就可以了

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

相对定位和绝对定位

定位标签:position

包含属性:relative(相对)

absolute(绝对)

1.position:relative;

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

2.position:absolute;

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

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

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

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

怎么让一个DIV绝对定位到页面的正中间

1、首先，新建一个html文件。

2、在html文件上找body标签，在body标签中创建div标签并设置class类：

div

fixed浮动居中

/div

3、对div设置基本属性。html文件找到title标签，在这个标签后新建一个style标签，然后在style标签里设置class类为fixed的属性为：宽为300像素，高为150像素，背景为红色，相对于浏览器窗口定位，距离浏览器顶部位置为20%。样式代码：

style

.fixed{

width: 300px;

height: 150px;

background-color: red;

position: fixed;

top: 20%;

}

/style

4、查看样式效果，保存html文件后使用浏览器查看设置的效果。

5、设置position:fixed 居中。为了给div自动居中显示，只需要在fixed类中再添加：

left: 0;

right: 0;

margin:0 auto;

6、查看居中效果。保存html文件后使用浏览器打开，就绝对居中了。

怎么样实现DIV的绝对定位

你这是一个层，应该在这个DIV的外部再加上一个父层div，用于固定你的这个div。 比如： div style="position:relative" id="sss" div id="flash" style="position:absolute; z-index:1;left:6px; top:6px;" …… …… /div /div 这样来固定，注意relative和absolute不要搞反了，用left和top或者right,bottom来定义相对位置。 楼上的那种方法是无法固定住在不同分辩率中的层的，除非处于最边边