CSS定位（position属性）以及top和magin-top的区别

来源：互联网发布：ubuntu访问windows盘编辑：程序博客网时间：2024/06/05 06:15

CSS 定位 (Positioning) 属性允许我们对元素进行定位。
CSS 定位和浮动：CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS position 属性可以选择 4 种不同类型的定位：

static：默认定位，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中——这种定位是默认的，一般没什么实际的作用。
relative：相对定位，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bottom/left来改变框的位置。
absolute：绝对定位，这种定位脱离文档流，可以理解为跟其他的元素不再一个次元中，可以用top/right/bottom/left来控制位置，absolute是相对于最近祖先非static定位来定位的，如果说他的父级定位是默认的，那么它就会继续向上找父级的父级，直到找到非static定位为基准点。
fixed：固定定位，这种定位是相对与浏览器的窗口来定位，我们经常会看到网页中右下角有个回顶部的标记，无论鼠标滑轮怎么滑动他都不会改变他的位置。

下面以具体代码效果为例进一步说明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.div1{
position: relative;
width: 400px;
height: 400px;
border:2px solid red;
background-color:#CCFF99;
margin:50px;
}
.div2{
width: 200px;
height: 200px;
margin:50px;
border:2px solid pink;
background-color:#CC9966;
}
.div3{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border:2px solid purple;
background-color:#FF6633;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>

<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body>
</html>

页面结果如下：

上面的代码中，div1是相对定位，div2是默认定位，div3是绝对定位，而且div2是div3的父级，div2是div3的父级；图中绿色为div1，咖啡色为div2，橘色为div3。由于div3的父级是div2，它是static定位（默认定位），所以div3会继续向上找父级的父级—div1，而div1是relative定位（相对定位），所以div3是以div1的位置为基准点定位的。

如果设置div的position属性为relative，则div3会直接以div2的位置为基准点定位，如下图所示：

从上图可以看出来，div3到了div2的左上角，可见其定位基准变成了div2。

在relative定位下top和margin-top的区别：一个div中设置了margin-top:50px; 那么中间这个50px属于盒子模型中的一部分；而设置了top：50px，则50px不属于盒子模型的一部分。

综上所述，top/right/bottom/left一般在absolutel定位中使用，在relative下也可以使用，但是在默认定位下是不起作用的。

参考博客：http://blog.csdn.net/lxiang222/article/details/70340084

阅读全文

0 0