CSS postion定位

一共分为5中, static , relative, absolute, fixed, inherit, 默认是static,

relative, 相对定位，针对父元素相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .rel {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: blue;
            left: 100px;
        }
        .rel2 {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: red;
            top: -50px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="rel">

    </div>
    <div class="rel2"></div>
    <div></div>
</body>
</html>

absolute 绝对定位，相对窗口的左上角的位置,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .pos {
            width: 300px;
            height: 300px;
            /*position: absolute;*/
            background: blue;
        }

        .pos2 {
            width: 100px;
            height: 100px;
            position: absolute;
            background: red;
            /*left: 200px;*/
            right: 100px;
        }

        body{
            height: 3000px;
        }
    </style>
</head>
<body>
    <div class="pos">
    <div class="pos2"></div>

    </div>
</body>
</html>

fixed 固定定位，不管浏览器器多高，都固定在窗口中的固定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .fix{
            width: 100%;
            height: 100px;
            position: fixed;
            background: blue;
            left: 0px;
            bottom: 0px;
        }

        body{
            height: 3000px;
        }
    </style>
    <style>
        .bro{
            width: 300px;
            height: 300px;
            background: black;
            position: absolute;
            left: 300px;
            top: 0px;
        }
        .test{
            width: 100px;
            height: 100px;
            background: yellow;
            position: fixed;
            left: 100px;
            top: 100px;
        }    </style>
</head>
<body>
    <div class="fix"></div>

    <div class="bro">
        <div class="test"></div>
    </div>
</body>
</html>

inherit 继承父元素的position位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .fix{
            width: 100%;
            height: 100px;
            position: fixed;
            background: blue;
            left: 0px;
            bottom: 0px;
        }

        body{
            height: 3000px;
        }
    </style>
    <style>
        .bro{
            width: 300px;
            height: 300px;
            background: black;
            position: absolute;
            left: 300px;
            top: 0px;
        }
        .test{
            width: 100px;
            height: 100px;
            background: yellow;
            position: fixed;
            left: 100px;
            top: 100px;
        }    </style>
</head>
<body>
    <div class="fix"></div>

    <div class="bro">
        <div class="test"></div>
    </div>
</body>
</html>

联系一个居中的登录布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Center</title>
    <style>
        .login {
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            position: fixed;
            margin-top: -100px;
            margin-left: -100px;
            background: blue;
        }

        .login .title{
            position: relative;
            width: 100%;
            height: 15px;
            padding: 5px 0px 5px 0px;
            top: 0px;
            background: yellow;
            z-index: -1;
        }
        .login .close{
            width: 10px;
            height: auto;
            background: red;
            postion: relative;
            margin-top: -20px;
            margin-left: 190px;
            z-index: 3;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        function closeXXX() {
            alert("i am close")
        }
        function titleXXX() {
            alert("i am title")
        }
    </script>
</head>
<body>
<div class="login">
    <div class="title" onclick="titleXXX()">
        i am title
    </div>
    <div class="close" onclick="closeXXX()">X</div>
</div>
</body>
</html>

posted on 2019-09-01 16:36 1161588342 阅读(317) 评论(0) 编辑收藏举报

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

CSS postion定位

relative, 相对定位，针对父元素相对定位

absolute 绝对定位，相对窗口的左上角的位置,

fixed 固定定位，不管浏览器器多高，都固定在窗口中的固定位置

inherit 继承父元素的position位置

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

CSS postion定位

relative, 相对定位，针对父元素相对定位

absolute 绝对定位， 相对窗口的左上角的位置,

fixed 固定定位，不管浏览器器多高，都固定在窗口中的固定位置

inherit 继承父元素的position位置

absolute 绝对定位，相对窗口的左上角的位置,