通過定位設定尺寸：
當元素沒有設定寬度和高度時，定位會影響元素的尺寸
<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/207125.html
標籤：Html/Css