码迷,mamicode.com
首页 > 其他好文 > 详细

定位position介绍

时间:2020-02-12 13:07:12      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:变化   span   块元素   round   box   部分   介绍   页面   情况   

定位 (position): 是一种更加高级的布局手段

       -通过定位可以将元素摆放到页面的任意位置。

       使用position属性来设置定位

        可选值: static 默认值 元素是静止的,没有开启定位

             relative 开启元素的相对定位

             absolute 开启元素的绝对定位

             fixed  开启元素的固定定位

             sticky 开启元素的粘滞定位

例子: 开启相对定位

    position:relative;

    top:100px; // 向上偏移100像素

    bottom:10px;

    left:10px;

    right:10px;

     相对定位的特点:

          1.如果不设置偏移量,元素不会发生任何变化。

          2.相对定位参照元素在文档中的位置进行定位。

          3.相对定位会提升元素的层级。

          4.相对定位不会使元素脱离文档流。

          5.相对定位不会改变元素性质。

   绝对定位的特点:

          1.如果不设置偏移量,元素的位置不会发生变化。

          2.元素会从文档流中脱离。

          3.绝对定位会改变元素的性质,行内元素变成块元素,块的宽度被内容撑开。

          4.绝对定位会使元素提升一个层级。

          5.绝对定位元素是相对于包含块进行定位的。

            包含块(containing Block)

              正常情况下:

                    包含块就是离当前元素最近的祖先块元素

                    例如:<div class="box1"> 2222<div class="box2">1111</div></div>   

                           div.box2的包含块就是div.box1

                       <div class="box"><span><em></em></span></div>

                        span元素的包含块 是div.box ; 

                        em元素的包含块  是div.box;

              绝对定位的包含块

                      离它最近的开启了定位的祖先元素。

                      如果所有的祖先元素都没有开启定位,则相对于根元素(<html>)定位。

    固定定位(fixed):绝大部分跟相对定位相同。

            唯一不同的是参照浏览器视口,不会随滚动条滚动改变。

    粘滞定位(sticky): 兼容性不好

            当元素位置到达某个位置后,不再滚动。

  

定位position介绍

标签:变化   span   块元素   round   box   部分   介绍   页面   情况   

原文地址:https://www.cnblogs.com/kukai/p/12298409.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!