您的位置：首页 > Web前端 > CSS

全面解析css定位属性position(主要是relative以及absolute)

2014-11-07 16:46 579 查看

    position 属性是规定元素的定位类型。

    这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

    以上是w3c对与position属性的解释和说明。。。看懂了么。。好吧一开始我看的时候也是懵懵懂懂，没有实际操作过，你绝对无法模拟出他的实际效果。

    我一直认为，实践是检验真理的唯一标准。所以多多实践才是王道。废话不多讲，下面来具体解析这个属性。

    所有html元素的position属性的默认值是static，这个属性标志着所有元素都要遵守正常流动布局，也就是默认布局。首先我们来说说absolute这个值。

   absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

<pre id="line1"><span></span><!DOCTYPE html>

<html>

    <head>

        <style type = "text/css">

            #parentDiv{

               width:100px;

               height:100px;

               border:1px solid blue;

               margin:50px;

           }

            #childDiv{

               width:50px;

               height:50px;

               border:1px solid green;

               position:absolute;

               top:0;

left:0;

           }

        </style>

    </head>

    <body>

        <div id = "parentDiv">

            <div id = "childDiv"></div>

        </div>

    </body>

</html>

上面我们给 childDiv 这个div设置了absolute属性并且设置了top和left

让我们看看实际效果(想看效果的直接复制上面代码保存为html文件打开即可)

    childDiv使用了absolute 绝对布局方式来定位自身。设置absolute后。浏览器会寻找childdiv的父容器，也就是

parentDiv 这个div，查看这个父容器的属性是否为static，如果是static这个默认的属性，浏览器会默认寻找parentDiv

这个容器的父类，判断其是否为static，如果不是static，将依据非static这个值的容器进行定位,直到body停止,relative和absolute都可以，请看下面这个栗子

<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
#parentDiv{
width:100px;
height:100px;
border:1px solid blue;
margin:50px;
position:relative;//新增定位属性
}
#childDiv{
width:50px;
height:50px;
border:1px solid green;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id = "parentDiv">
<div id = "childDiv"></div>
</div>
</body>
</html>

上面这个栗子。。childDiv他定位依赖的容器就是parentDiv!

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"

属性进行规定。

    这个属性很容易就能弄懂。设置fixed后，当前元素永远都会根据body来定位。在此不做代码演示

relative:生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

      这个属性也很容易理解，他与absolute是不同的，absolute会寻找父容器来判断是否依赖定位。但是这个不会

父容器，他会依赖与自己本身在正常流定位的位置然后偏移，可以看下面这个栗子

<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
#parentDiv{
width:100px;
height:100px;
border:1px solid blue;
margin:50px;
}
#childDiv{
width:50px;
height:50px;
border:1px solid green;
position:relative;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div id = "parentDiv">
<div id = "childDiv"></div>
</div>
</body>
</html>

    这个栗子其实是文章第一个栗子的修改版。。只修改了childDiv的position属性和偏移值,在上面的栗子中我们可以
看出，childDiv依赖与原先的位置偏移了位置，读者可以修改parentDiv的定位属性来查看效果

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

    默认值。。你懂的。。在此不多做介绍

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

    继承父类的position属性，基本不用，因为你不知道父类容器的定位属性会在何种需求下更改，可能会导致

意想不到的惊喜。。。所以一般建议不要使用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html 布局

相关文章推荐

新的分享

章节导航