轻松掌握 CSS 3 定位布局特性 -cyy

来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/9 15:18:26　　对本文有异议

通过定位设置尺寸：

当元素没有设置宽度和高度时，定位会影响元素的尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        main{
            width:200px;
            height:200px;
            border:1px solid red;
            position:relative;
        }
        div{
            background:pink;
            position:absolute;
            left:100px;
            right:0;
            top:0;
            bottom:0;
        }
        
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

控制元素居中定位的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        main{
            width:200px;
            height:200px;
            border:1px solid red;
            position:relative;
        }
        div{
            width:100px;
            height:100px;
            background:pink;
            position:absolute;
            left:50%;
            top:50%;
            margin-top:-50px;
            margin-left:-50px;
        }
        
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

滚动对定位元素的影响：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        article{
            width:300px;
            height:300px;
            border:2px solid red;
            position:relative;
            overflow:scroll;
        }
        section{
            width:300px;
            height:1000px;
            background:#ddd;
        }
        div{
            width:50px;
            height:50px;
            position:absolute;
            left:0;
            bottom:0;
            background:pink;
        }
        
    </style>
</head>
<body>
    <article>
        <section>
            <div></div>
        </section>
    </article>
</body>
</html>

滚动会导致绝对定位的元素也进行滚动

定位叠加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        
        article{
            width:300px;
            height:300px;
            border:2px solid red;
            box-sizing: border-box;
            cursor:pointer;
        }
        section{
            width:300px;
            height:300px;
            background:#ddd;
            position:absolute;
            left:0;
            top:0;
        }
        img{
            width:300px;
            height:300px;
            position:absolute;
            left:0;
            top:0;
            z-index:-1;
        }
        article:hover img{
            z-index:2;
        }
        
    </style>
</head>
<body>
    <article>
        <section></section>
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2616821908,285454954&fm=26&gp=0.jpg" alt="">
    </article>
</body>
</html>

可以看到鼠标移入后显示图片

京东商城购物车部件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:200px;
        }
        article{
            width:150px;
            position:relative;
            cursor:pointer;
        }
        div{
            height:50px;
            border:1px solid #ddd;
            text-align:center;
            line-height:50px;
            background:#fff;
            color:#555;
        }
        div:nth-of-type(2){
            position:absolute;
            width:300px;
            top:50px;
            right:0;
            display:none;
            z-index:-1;
            
        }
        article:hover div:nth-of-type(1){
            border-bottom:none;
            border-color:red;
        }
        article:hover div:nth-of-type(2){
            display:block;
            border-color:red;
        }
        
    </style>
</head>
<body>
    <article>
        <div>我的购物车</div>
        <div>购物车中暂无商品</div>
    </article>
</body>
</html>

粘性定位效果很感人：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:200px;
        }
        article{
            width:400px;
            height:300px;
            overflow:scroll;
            border:1px solid pink;
        }
        section{
            margin-bottom:50px;
        }
        section h2{
            color:#fff;
            background:pink;
            position:sticky;
            top:0;
            left:0;
        }
        
    </style>
</head>
<body>
    <main>
        <article>
            <section>
                <h2>
                    css粘性定位position：sticky1
                </h2>
                <p>
                    1 position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
                    position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
　　可以知道sticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
　　比较蛋疼的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。
                </p>
            </section>
            <section>
                <h2>
                    css粘性定位position：sticky2
                </h2>
                <p>
                    2 position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
                    position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
　　可以知道sticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
　　比较蛋疼的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。
                </p>
            </section>
        </article>
    </main>
</body>
</html>

能够自动吸附住标题

粘性同级定位的特性：

如果是同级元素，会叠加；

如果不是同级元素，后面的会把前面的顶走；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <link rel="stylesheet" href="style.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:200px;
        }
 
        /* 同级元素，后面的把前面的顶走 */
        .main1 article{
            width:400px;
            height:300px;
            overflow:scroll;
            border:1px solid pink;
        }
        .main1 section{
            margin-bottom:50px;
        }
        .main1 section h2{
            color:#fff;
            background:pink;
            position:sticky;
            top:0;
            left:0;
        }
 
        /* 非同级元素，后面的会覆盖住前面的 */
        .main2 article{
            width:400px;
            height:300px;
            overflow:scroll;
            border:1px solid pink;
        }
        .main2 p{
            margin-bottom:50px;
        }
        .main2 h2{
            color:#fff;
            background:pink;
            position:sticky;
            top:0;
            left:0;
        }
        
    </style>
</head>
<body>
    <main class="main1">
        <article>
            <section>
                <h2>
                    css粘性定位position：sticky1
                </h2>
                <p>
                    1 position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
                    position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
　　可以知道sticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
　　比较蛋疼的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。
                </p>
            </section>
            <section>
                <h2>
                    css粘性定位position：sticky2
                </h2>
                <p>
                    2 position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
                    position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
　　可以知道sticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
　　比较蛋疼的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。
                </p>
            </section>
        </article>
    </main>
 
    <main class="main2">
        <article>
                <h2>
                    css粘性定位position：sticky1
                </h2>
                <p>
                    1 position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
                    position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
　　可以知道sticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
　　比较蛋疼的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。
                </p>
                <h2>
                    css粘性定位position：sticky2
                </h2>
                <p>
                    2 position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
                    position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
　　可以知道sticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
　　比较蛋疼的是这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。
                </p>
        </article>
    </main>
</body>
</html>