position定位

接着上篇文章浮动,这篇文章来说说定位的使用.

静态定位position:static

position:static 这个是默认样式, 会遵循文本流. 并且在这个状态下top, right,bottom,left,z-index
不会提升自身层级,因此会被float元素遮盖住.

相对定位position:relative

相对定位是相对于元素本身的定位.
这里要注意的是 相对定位relative和static一样,会遵循文本流. 基于这一性质,我们就可以联想到在我们给元素设置position:relative的时候,如果没有设置偏移量top,bototm,left,right这些值的时候,元素就不会发生任何变化.
并且不会像float那样把元素块级化,设置position:relative的元素不会改变元素性质(即该是块就是块,该是行内就是行内)
并且会提升自身层级(怎么去理解这句话),上一篇文章有说,由于层级结构,float元素会把 其他元素遮挡住.那么如果这个元素又要遵循文档流,又不想被float遮挡住该怎么办?这时候就可以设置position:relative
这里要提的一点是在设置偏移量的时候,为了符合阅读方式(左上left,top)为起点, 因此如果同时设置top, bottom偏移量,那么只有top会成效(left, right同理)

绝对定位position:absolute

看到绝对定位有人会喊说'父相子绝',其实这个词就是为了好记,所以把一大堆话缩成四个字,听起来很强的样子.就比如说成语,四个字表达一堆意思. 我们来说说绝对定位的具体属性吧.(我还是觉得直接记属性延伸应用比较适合我)
相对定位relative是参照元素本身,那么绝对定位的参照物就是最近一个设置position(不包括position:static;)属性的 父元素, 如果付清都没有设置position属性的话怎么办? 那么这个元素就会相对于浏览器去定位.
那么为什么会说到'父相子绝'这个词, 是因为父亲相对定位时候是不会脱离文档流的,子级绝对定会会脱离文档流.但是这个特殊情况,也符合前面讲的, 因此'父相子绝'这个情况,子元素的定位参考对象是他的父亲,也就是设置了相对定位relative的这个父亲.

固定定位position:fixed

这个定位就让人很烦, 相信大家浏览网页的时候都会碰到.广告就贴在视口边上跟着你的滚轮跑来跑去,滑都滑不掉.那么这里要说的是,我们的绝对定位是参考父级(含position的)或者是浏览器本身.但是固定定位position:fixed则是相对于浏览器视口本身.因此你缩放视口或者是滚动视口,他都会在那个固定位置.

讲完这些定义就该说说一些别的了

position:relative position:static 不会让元素块级化,但是fixed absolute会让元素块级化,但是块级化之后不具有独占一行和默认宽度为父级百分百这些特性.
再说个小点先: 子元素的width:50%;height:50%;或者是left:50%;等百分比的字样,不一定是相对于父元素的. 而是相对于设置有position属性的祖先元素(position:static;除外).并且width:50%; height:50%;是相对于内容区,而偏移量left:50%;right,top,bottom这些事相对于padding区的.
也就是说

    .box1{
        width:500px;
        height:500px;
        padding:100px;
        border:100px solid;
        position:relative;
        
    }
    .box2{
        width:50%;
        height:50%;
        position:absolute;
        top:50%;
    }

    <div class="box1">
        <div class="box2">
    </div>

这里box2 的盒子 width=250px height=250px, top偏移量就是(500px + 100px (padding-left) + 100px(padding-right) )/2 = 350px
说到偏移量, 我们计算的时候是根据整个盒子的边计算的.比如果设置top的时候就是根据盒子最上边摆放的.因此在我们设置居中的时候往往会用margin-top: "负的盒子高度一半"; 或者是给出top:0; bottom:0; 然后加margin:auto自动居中.个人比较喜欢第二个方法,因为是自适应的,不需要根据盒子尺寸去重新算和改margin-top 的值