• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章导航

                  CSS position:sticky 粘性定位

                  2018-12-22 01:00| 作者: admin| 查看: 942| 评论: 0|来自: 蚂蚁部落

                  如果提到position定位,最容易想到是如下几个定位方式:

                  (1).position:absolute绝对定位。

                  (2).position:relative相对定位。

                  (3).position:fixed固定定位。

                  是非常重要的知识点,想必每一个前端人员,都曾花费一定精力去掌握它们。

                  当前,新增一功能强大定位方式,可以轻松实现之前需要利用JavaScript且较为繁琐的效果。

                  由此,此定位方式在可以预期的将来一定会得到广泛应用。

                  那就是本文的主角position:sticky 粘性定位,功能恰如其名,后面通过代码演示。

                  语法结构:

                  [CSS] 纯文本查看 复制代码
                  position:sticky

                  top、bottom、left和right属性分别设置元素粘性定位的临界值。

                  特别说明:此定位方式当前尚属实现性质,可以预测以后会得到标准化。

                  浏览器兼容性截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201812/22/010143yy5vra3a2ccc8aci.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  在标准浏览器中支持度越来越高看起来是一种趋势。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html> 
                  <html> 
                  <head> 
                  <meta charset=" utf-8"> 
                  <meta name="author" content="http://www.pecf.tw/" /> 
                  <title>蚂蚁部落</title> 
                  <style type="text/css">
                  .container {
                    background: #eee;
                    width: 400px;
                    height: 1000px;
                    margin: 120px auto;
                  }
                  .sticky {
                    position: sticky;
                    height: 60px;
                    line-height: 60px;
                    margin-bottom: 30px;
                    background: #ccc;
                    top: 0px;
                  }
                  div {
                    font-size: 30px;
                    text-align: center;
                    color: #fff;
                  }
                  </style>
                  </head>
                  <body>
                    <div class="container">
                      <div class="sticky">蚂蚁部落一</div>
                      <div class="sticky">蚂蚁部落二</div>
                      <div class="sticky">蚂蚁部落三</div>
                      <div class="sticky">蚂蚁部落四</div>
                    </div>
                  </body>
                  </html>

                  上述代码将class属性值为"sticky"的元素设置为粘性定位。

                  当向下拖动滚动条的时候,div元素会向上移动,但是当达到视口包含块顶端的时候,自动会固定住。

                  这是十分常见的效果,如果不使用此定位方式,利用JavaScript实现比较繁琐。

                  使用top、bottom、left和right属性可以设置元素固定的临界位置。

                  粘性定位?#25442;?#33073;离文档流,它的表现有点像是相对定位于固定定位的组合体。

                  关于视口包含块的概念,在CSS position:fixed 固定定位一文后半部分有所涉及。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html> 
                  <html> 
                  <head> 
                  <meta charset=" utf-8"> 
                  <meta name="author" content="http://www.pecf.tw/" /> 
                  <title>蚂蚁部落</title> 
                  <style type="text/css">
                  .container {
                    background: #eee;
                    width: 400px;
                    height: 1000px;
                    margin: 120px auto;
                  }
                  .sticky {
                    position: sticky;
                    height: 60px;
                    line-height: 60px;
                    margin-bottom: 30px;
                    background: #ccc;
                    top: 50px;
                  }
                  div {
                    font-size: 30px;
                    text-align: center;
                    color: #fff;
                  }
                  </style>
                  </head>
                  <body>
                    <div class="container">
                      <div class="sticky">蚂蚁部落一</div>
                      <div class="sticky">蚂蚁部落二</div>
                      <div class="sticky">蚂蚁部落三</div>
                      <div class="sticky">蚂蚁部落四</div>
                    </div>
                  </body>
                  </html>

                  上述代码设置class属性值为"sticky"的div元素距离视口包含块顶部50px的时候固定。

                  四个属性不能采用默认值,必须至少显式设置其中属性之一,粘性定位才会生效。

                  且left与top的优先级大于right与bottom,如通过同时设置的话。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html> 
                  <html> 
                  <head> 
                  <meta charset=" utf-8"> 
                  <meta name="author" content="http://www.pecf.tw/" /> 
                  <title>蚂蚁部落</title> 
                  <style type="text/css">
                  #box{
                    width:500px;
                    height:500px;
                    overflow:auto;
                    margin:100px;
                  }
                  .container {
                    background: #eee;
                    width: 400px;
                    height: 1000px;
                    margin: 120px auto;
                  }
                  .sticky {
                    position: sticky;
                    height: 60px;
                    line-height: 60px;
                    margin-bottom: 30px;
                    background: #ccc;
                    top:0px;
                  }
                  div {
                    font-size: 30px;
                    text-align: center;
                    color: #fff;
                  }
                  </style>
                  </head>
                  <body>
                  <div id="box">
                    <div class="container">
                      <div class="sticky">蚂蚁部落一</div>
                      <div class="sticky">蚂蚁部落二</div>
                      <div class="sticky">蚂蚁部落三</div>
                      <div class="sticky">蚂蚁部落四</div>
                    </div>
                  <div>
                  </body>
                  </html>

                  上述代码是基于box元素进行粘性定位的,而不是基于视口包含块。

                  粘性定位的定位参考对象距离其最近的overflow属性值为visible的具有滚动条的祖先元素,如果以body或者body父辈元素为参考,定位参考对象是视口包含块。

                  同时还要注意一点,粘性定位元素的任何一个父辈元素的overflow属性值必须是visible,否则粘性定位不生效。

                  最后总结如下:

                  (1).粘性定位必须设置top、bottom、left和right属性之一,否则?#25442;?#29983;效。

                  (2).粘性定位任何一个父元素overflow属性值必须是visible,否则?#25442;?#29983;效。

                  (3).粘性定位基于距离他最近的具有滚动条的父元素,否则基于视口包含块。

                  1

                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  刚表态过的朋友 (1 人)

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            海南环岛赛吉祥物 酷玩三张牌354版本 国际网球比分直播 手机真钱捕鱼游戏平台 极速十一选五计划 一码中特提前验证 牛彩网南粤36选7开奖结果 131期小鱼儿心水论坛 3d037期开奖历史 竟猜让球胜平负技巧 天津快乐10分开奖查询 广东11选5专家合买 快速赛车开奖怎么玩 顶呱刮怎么算中奖 贵州快三的开奖结果