定位

最新推荐文章于 2017-07-18 20:11:50 发布

燃烧岁月-------

最新推荐文章于 2017-07-18 20:11:50 发布

阅读量1.7k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yangwenlongsss/article/details/75092284

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

定位方式有：static、fixed、relative、absolute。

static 静态定位（默认）

无定位，元素正常出现了流中，不受left、right、top、bottom属性的影响。

div{
    width: 200px;
    height: 200px;
    background-color: red;
    position: static;
}

显示效果

fixed

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

显示效果为

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;
            left:30px;
            top:20px;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top。

重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是静态定位z-index无效。

relative

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: rgba(255,0,0,1);
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            position: relative;
            top:20px;
            left:30px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

显示结果为

从结果可以看出，相对定位是从原有位置进行位移，但并不影响后续元素的位置。

absolute 绝对定位

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: rgba(255,0,0,1);
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            position: absolute;
            top:20px;
            left:30px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>