position定位及實際應用

時間 2020-02-01

原文原文鏈接

position: static; 靜態定位 / 常規定位 / 天然定位html

忽略top/right/bottom/left/z-index的影響，使元素回到天然流中瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .block{
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;

            position: relative;
            top:10px;
        }
        .block:first-child{
            border:1px solid;
        }
        .block:nth-child(2){
            position: static;
            border:1px solid red;
        }
        .block:nth-child(3){
            border:1px solid blue;
        }
        .block:nth-child(4){
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
    <div class="block">D</div>
</body>
</html>

設置margin:auto爲水平居中url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .block{
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;

            position: static;
            margin:auto;
        }
        .block:first-child{
            border:1px solid;
        }
        .block:nth-child(2){
            border:1px solid red;
        }
        .block:nth-child(3){
            border:1px solid blue;
        }
        .block:nth-child(4){
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
    <div class="block">D</div>
</body>
</html>

position:relative 相對定位spa

相對於本身在常規流中的位置，進行偏移3d

原來的空間依然預留code

能夠使浮動元素髮生偏移，並控制堆疊順序htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .block{
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;
            color:white;

            float:left;
            position: relative;

        }
        .block:first-child{
            background:black;    
            z-index:2;    
        }
        .block:nth-child(2){
            background:red;    
            left:-50px;
            z-index:1;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
</body>
</html>

position:absolute;blog

參照物是最近定位的祖先元素繼承

若是沒有祖先元素被定位，則默認爲bodyci

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .block{
            width:100px;
            height:100px;
            line-height:100px;
            text-align:center;
            border:2px solid;

            position: relative;
        }
        .block:nth-child(2){
            border-color:red;

            position: absolute;
            top:20px;
            left:20px;
        }
    </style>
</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div>
</body>
</html>

實現水平垂直居中定位：

一、給父元素設置：position: relative;

二、給子元素設置：

position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{
            width:100px;
            height:100px;
            border:2px solid;

            position: relative;
        }
        .child{
            width:40px;
            height:40px;
            border:2px solid;
            border-color:red;

            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

position:fixed;

繼承position:absolute;的全部特徵，區別是以視口作參照來定位

position:sticky;

與top偏移量結合使用

若是最近祖先元素有定位，則參考最近祖先元素；不然參考視口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{
            width:1200px;
            height:100px;
            background:#abcdef;
            margin:0 auto;
        }
        .nav{
            width:1200px;
            height:50px;
            background:orange;
            margin:0 auto;
            position: sticky;
            top:0;
        }
        .container{
            width:1200px;
            height:1000px;
            background:pink;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="banner">海報大圖</div>
    <div class="nav">導航呀</div>
    <div class="container">內容。。。</div>
</body>
</html>

相對於最近定位的祖先元素作參考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{
            width:1200px;
            height:100px;
            background:#abcdef;
            margin:0 auto;
        }
        .nav{
            width:1200px;
            height:50px;
            background:orange;
            margin:0 auto;
            position: sticky;
            top:20px;
        }
        .container{
            width:1200px;
            height:200px;
            background:pink;
            margin:0 auto;
            position: relative;
            overflow-y: scroll;
            overflow-x: hidden;

        }
        p{
            height:1000px;
        }
    </style>
</head>
<body>
    <div class="banner">海報大圖</div>
    <div class="container">
        <div class="nav">導航呀</div>
        <p>內容。。。</p>
    </div>
</body>
</html>

導航在居中位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .banner{
            width:1200px;
            height:100px;
            background:#abcdef;
            margin:0 auto;
        }
        .nav{
            width:1200px;
            height:50px;
            background:orange;
            margin:0 auto;
            position: sticky;
            top:20px;
        }
        .container{
            width:1200px;
            height:200px;
            background:pink;
            margin:0 auto;
            position: relative;
            overflow-y: scroll;
            overflow-x: hidden;

        }
        p{
            height:1000px;
        }
        p:first-child{
            height:50px;
        }
    </style>
</head>
<body>
    <div class="banner">海報大圖</div>
    <div class="container">
        <p>內容。。。</p>
        <div class="nav">居中導航呀</div>
        <p>內容。。。</p>
    </div>
</body>
</html>

www.caniuse.com 檢測瀏覽器兼容性

彈出層的簡單實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .content{
            width:100%;
            height:1000px;
            background:url(bg.jpg) top center no-repeat;
        }
        .opacity{
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,.6);
            position: fixed;
            top:0;
            left:0;
        }
        .login{
            width:300px;
            height:200px;
            text-align:center;
            line-height:200px;
            position: fixed;
            background-color:#fff;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-150px;
        }
    </style>
</head>
<body>
    <div class="content"></div>
    <div class="opacity"></div>
    <div class="login">登陸框~</div>
</body>
</html>

側邊欄導航實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        ul{
            list-style:none;
        }

        .content{
            width:100%;
            height:1000px;
            background:url(bg.jpg) top center no-repeat;
        }

        .nav{
            width:160px;
            height:205px;
            position: fixed;
            left:0;
            top:50%;
            margin-top:-102px;
        }

        .nav-li{
            width:160px;
            height:auto;
            line-height:40px;
            border-bottom:1px solid #fff;
            color:#fff;
            background:#333;
            text-align: center;
            cursor:pointer;
        }

        .tit{
            width:160px;
            height:40px;
        }

        .nav-li ul{
            width:160px;
            height:auto;
            background:#fff;
            display: none;
        }

        .nav-li:hover ul{
            display: block
        }

        .nav-li ul li{
            width:160px;
            height:40px;
            color:#333;
            border-bottom:1px dashed #666;
            text-align: center;
            line-height:40px;
            position: relative;
        }

        .nav-li ul li:hover .subnav{
            display: block;
        }

        .subnav{
            position: absolute;
            width:160px;
            height:auto;
            top:0;
            left:160px;
            background:#444;
            display: none;
        }

        .subnav-item{
            width:160px;
            height:40px;
            border-bottom:1px solid #fff;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="nav">
            <div class="nav-li">
                <div class="tit">導航</div>
                <ul>
                    <li>
                        二級導航
                        <div class="subnav">
                            <div class="subnav-item">三級導航</div>
                            <div class="subnav-item">三級導航</div>
                            <div class="subnav-item">三級導航</div>
                            <div class="subnav-item">三級導航</div>
                        </div>
                    </li>
                    <li>二級導航</li>
                    <li>二級導航</li>
                    <li>二級導航</li>
                </ul>
            </div>
            <div class="nav-li">導航</div>
            <div class="nav-li">導航</div>
            <div class="nav-li">導航</div>
            <div class="nav-li">
                <div class="tit">導航</div>
                <ul>
                    <li>
                        二級導航
                        <div class="subnav">
                            <div class="subnav-item">三級導航</div>
                            <div class="subnav-item">三級導航</div>
                            <div class="subnav-item">三級導航</div>
                            <div class="subnav-item">三級導航</div>
                        </div>
                    </li>
                    <li>二級導航</li>
                    <li>二級導航</li>
                    <li>二級導航</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。