如何给div定位_div相对定位和绝对定位

导航：

• 1、如何让div固定在页面的某个位置
• 2、如何定位DIV
• 3、怎么让一个DIV绝对定位到页面的正中间
• 4、如何固定div在网页中指定的位置？
• 5、怎么给div加定位？

如何让div固定在页面的某个位置

建议使用css实现，效果更佳，使用position: fixed，固定定位，具体位置的调整是用top、left、right、bottom也可以使用margin调整

css实现代码

div style="position: fixed;top:100px; left: auto; right: auto; bottom: auto; " /div

一般的网站的浮动广告以及浮动菜单等可以使用fixed来实现，js的话需要计算位置以及滚动条滚动时触发事件从而进行计算使用window.onscroll事件代码如下

HTML部分代码

div style="position:absolute;background-color:red;width: 50px;height: 50px;" id="box"/div

Javascript部分代码

window.onscroll=function(){

var box= document.getElementById("box");

var t = document.documentElement.scrollTop || document.body.scrollTop;

box.style.top=t+"px";

}

如何定位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、首先，新建一个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在网页中指定的位置，可以加一个CSS属性：

#div{

        position:absolute;//绝对定位，这个是随页面走动的，可以换成fixed，不随页面走动。

        left:0;

        top:0;

        z-inde:111111;

        width:1440px;

        height:36px;

        background:red;

}

要想用定位必须有一个是参照物，才可以将你要固定的元素，固定在想要的位置。

（position:relative;参照物）

要固定的元素用（position:absolute也可以 position:fixed；但是效果不同）

怎么给div加定位？

div：{

position：absolute;

top:5px;

left:5px;

}

其中，

position是定位属性名，定位属性值有两个：

1、absolute; 这是绝对定位

2、relative; 这是相对定位

top 表示div距离顶部的位移

left 表示div距离左边的位移

标签：如何给div定位