css之position

昨天看了这个属性, 刚开始对照网上的解释看有点云里雾里, 不过小平同志有句话说的好, 实践是检验真理的唯一标准,那咱们就来动手实践看一下!

首先,position支持这么几个属性值的设置

absolute(绝对定位)
fixed(绝对定位, 以浏览器窗口为基础)
relative(相对父窗口定位)
static(默认的,在文档流中)
inherit(继承父元素中设置的属性值)

咱们先来看一下absolute

在说到absolute之前就要先说一下文档流, 文档流, 简单点理解就是, 一段div, 或者一段表格, 自上而下, 从左到右, 有序排列,absolute的作用就是让某一元素脱离文档流, 然后再通过top,left,right,bottom对元素位置进行从新设置。

它遵从两个基本原则

原则1: 父级设置了position属性, 则当前定位根据父级position里的属性值进行定位。

原则2: 父级没有设置position属性, 则当前从浏览器的左上角开始定位。

首先举个父级不设置position的例子

<html>
<head>
<title>父级没有position</title>
<style type="text/css">
body
{
  background:red;
}
div.main
{
        width:400px;
    height:150px;
    background:green;
    position:absolute;
    top:0px;
    left:0px;
}
</style>
</head>
<body>

    <div class="main">
    1111111111111
    </div>

</body>
</html>

父级没有设置position, div清0后, 依据的是从浏览器左上角开始,左上角对应的夹角是上和左,于是当上和左被清0后, 就呈现出了清除上和左间距的状态。

<html>
<head>
<title>父级有position</title>
<style type="text/css">
body
{

  background:red;
}
#main
{
    width:950px;
    height:400px;
    background:yellow;
    position:absolute;
    top:15px;
    left:40px;
}
#center
{
    width:475px;
    height:200px;
    background:green;
    position:absolute;
    top:10px;
    left:25px;
}
</style>
</head>
<body>

    <div id="main">
        <div id="center">
        1111111111111111
        </div>
    </div>

</body>
</html>

父级存在position,当center再次进行top left属性定位时, 依据的是从已定位的main(父级)设置的top,left左上角为起始点。

还有一种情况,就是当body也存在position的时候,我们来看一下

<html>
<head>
<title>body存在positon</title>
<style type="text/css">
body
{
    background:red;
    position:absolute;
    top:150px;
    left:70px;
}
#main
{
    width:100px;
    height:25px;
    background:yellow;
}
</style>
</head>
<body>
<div id="main">
111111
</div>
</body>
</html>

因为body里设置了position, 并下移150个像素, 右移70个像素,所以当设置main时, 即使没有给移动属性, 它默认也会继承body里的下移和右移。

继续来看一下fixed

<html>
<head>
<title>fixed</title>
<style type="text/css">
body
{
 background:red;
}
img
{
    position:fixed;
    top:20px;
    left:17px;
}
</style>
</head>
<body>
<img src="file:\\e:\\from\\love.jpg">

</body>
</html>

把img 设置为fixed后, 它就以浏览器左上角为顶点结合设置的距离固定了, 即使最大化和最小化浏览器窗口, 图片位置依然不会变。

在来看一下 relative(相对上个盒子边界的定位)

<html>
<head>
<title>相对定位relative</title>
<style type="text/css">
body
{
   background:red;
}
#main
{
    width:750px;
    height:300px;
    background:yellow;


}
#t
{
    width:300px;
    height:150px;
    background:blue;
    position:relative;
    top:25px;
    left:45px;
}
</style>
</head>
<body>
<div id="main">
    <div id="t">
    </div>
<div>
</body>
</html>

可以看到, 没给父窗口main position属性, t窗口的浮动也是以父窗口的左上角为起点开始的。

再来看一下inherit, inherit是继承上级父元素对应属性值的意思, 比如

<html>
<head>
<title>inherit继承</title>
<style type="text/css">
body
{
   background:red;
}
#main
{
    width:750px;
    height:300px;
    background:yellow;

}
#t
{
    width:300px;
    height:inherit;
    background:blue;


}
</style>
</head>
<body>
<div id="main">
    <div id="t">
    12343422
    </div>
<div>
</body>
</html>

这样 ,子窗口t就继承了父窗口的300像素高。

除此之外, 还有两个衍生属性, z-index 和overflow, 比如

<html>
<head>
<title>z-index</title>
<style type="text/css">
body
{
 background:red;
}
#demo
{
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
}
</style>
</head>
<body>

<div>aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div>aaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="demo">
<img src="e:\from\love.jpg">
</div>

</body>
</html>

demo div的属性里设置了一个z-index -1 这样就把demo div里的img放到了里面一层, 不至于让图片覆盖掉上面的div里的内容, 也可以利用这个做出
在图片上写字的效果

<html>
<head>
<title>overflow</title>
<style type="text/css">
     body
     {
         background:red;
     }
     #main
     {
         width:400px;
         height:250px;
         background:yellow;
         overflow:hidden;
     }
</style>
</head>
<body>
<div id="main">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>

这样, 超出设置的宽高边界的a就会被隐藏。

此条目发表在div/css分类目录,贴了, , , , , , , 标签。将固定链接加入收藏夹。