欢迎光临
我的个人博客网站

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

通过定位设置尺寸:

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

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

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

 

 

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

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

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

 

 

滚动对定位元素的影响:

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

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

 

 

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

 

定位叠加:

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

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

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

 

 

京东商城购物车部件:

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

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

 

 

粘性定位效果很感人:

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

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

 

 能够自动吸附住标题

 

粘性同级定位的特性:

如果是同级元素,会叠加;

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

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 轻松掌握 CSS 3 定位布局特性 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏