- A+
所属分类：Web前端
通过定位设置尺寸：
当元素没有设置宽度和高度时，定位会影响元素的尺寸
<!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>
