輕鬆掌握 CSS 3 定位佈局特性 -cyy

時間 2020-11-16

標籤 css html 瀏覽器佈局網站 spa code htm blog 事件欄目 CSS 简体版

原文原文鏈接

經過定位設置尺寸：css

當元素沒有設置寬度和高度時，定位會影響元素的尺寸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{
            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>

滾動會致使絕對定位的元素也進行滾動網站

定位疊加：spa

<!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>

能夠看到鼠標移入後顯示圖片code

京東商城購物車部件：htm

<!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>

粘性定位效果很感人：blog

<!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>