1.相对定位position:relative;它是相对于当前位置来进行定位

2.绝对定位position:absolute;它是脱离了原文档流,需要给它一个参照物,所以给它套一个父级来作为参照

3.使用绝对定位要结合相对定位来使用,如果需要使用绝对定位,应给绝对定位添加一个父级来参照,这就相对于父级来定位元素

4.固定定位position:fixed;顾名思义就是固定

5.本篇使用到Font Awesome字体库来美化页面

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用定位制作登录页面和在线客服(固定定位,绝对定位,相对定位)2019/04/26</title>
    <link rel="stylesheet" href="static/lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        *{margin:0;padding:0;}
        button{border:none;}
        a:link {text-decoration:none;}
        a:visited {text-decoration:none;}
        body{
            height:2000px;
        }
        .log-img{
            position:relative;
            margin-top: 70px;
            width:100%;
            height:600px;
            background-image: url("https://gtms01.alicdn.com/tps/i1/TB1GTCYLXXXXXcHXpXXcoeQ2VXX-2500-600.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }
        .log-weight{
            height: 18px;
            line-height: 18px;
            font-size: 16px;
            color: #3c3c3c;
            margin-top: 9px;
            padding-bottom: 8px;
            font-weight: 700;
        }
        .form-log{
            position:absolute;
            background-color:#E9E9F2;
            top: 260px;
            right: 229px;
            width:350px;
            height:300px;
            text-align:center;
        }
        .log-input input{
            width:250px;
            height:32px;
        }
        .log-input{
            position:relative;
        }
        .user{
            display:block;
            position:absolute;
            background-color:#ddd;
            color:#fff;
            width:35px;
            height:35px;
            left:12px;
            top:30px;
        }
        .log-input input{
            margin:29px;
        }
        button{
            display:block;
            position:absolute;
            width:255px;
            height:38px;
            color:#fff;
            text-align:center;
            line-height: 32px;
            left:47px;
            top:240px;
            background-color:#F52B00;
        }
        button:hover{
            background-color:#ff4400;
        }
        .comment{
            position:fixed;
            right:5px;
            bottom:11px;
        }
        .comment :hover{
            color:lightblue;
        }
    </style>
</head>
<body>
    <div class="log-img"></div>
    <div class="form-log">
        <div>
        <form action="" method="">
            <div class="log-weight">密码登录</div>
        <div class="log-input">
            <libel class="user"><i class="fa fa-user fa-2x"></i></libel>
            <input type="text" placeholder="会员名/手机/邮箱" autofocus required>
        </div>
        <div class="log-input">
            <libel class="user"><i class="fa fa-lock fa-2x"></i></libel>
            <input type="password" required>
        </div>
            <div class="sub">
                <button>登录</button>
            </div>
        </form>
        </div>
    </div>
    <div class="comment" title="在线客服"><a href=""><i class="fa fa-comments fa-2x"></i></a></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例