定位?

• 默认是static
• 相对定位
• 绝对定位
• 固定定位

相对定位:

• 没脱离文档流,位置还在
• 相对定位的元素比普通元素的层级要高
• 相对定位的元素,它的参照物的元素是它自身
• 相对定位还有一个比较常用的作用,就是给绝对定位的元素做参照物
• 如果给相对定位的元素同时设置left、right、bottom、top,它将按照left和top定位

绝对定位:

• 想让谁绝对定位,咱们就给谁加position:absolute;
• 让谁做它的参照物,咱们就给谁添加position:relative;但是如果它的参照物已经具备position:absolute;position:fixed;那我们就不用设置了,如果都没有,并且也没设置,就会参照body

绝对定位的特点?

• 脱离文档流
• 默认情况下层级大于普通文档流(它的层级是可以设置的,z-index设置层级)
• 参照物只要是它的上级(并不是上一级)元素,都可以,注意,不能是同级元素
• 浏览器在寻找参照物的时候,是按照就近原则去找的,就是说如果绝对定位的元素的父级元素如果设置了position:absolute,或者是position:relative,或者position:fixed.那参照物就是它父亲,如果它父亲不具备这三个其中之一,就会继续向它的上级继续寻找,直到找到为止,如果到最后都没找到,那么参照物就是body.
• 如果不给绝对定位的元素设置宽度,它的宽度就是自身的内容。如果给绝对定位的元素的宽度设置百分比,它的宽度是参照它的参照物(而不是它的父级)

固定定位?

• 想要给谁设置固定定位,就给谁添加position:fixed;
• 固定定位的参照物是浏览器窗口;

让一个定位元素在盒子中垂直居中的公式?

• 让绝对定位的元素top：50%,margin-top:负的子盒子的高度的一半

    
            
    
    
     
    
复制代码

让一个定位元素水平居中的方法?

• left:50%，margin-left:为子盒子负的宽度的一半

    
            
    
     
    
复制代码

面试题:如何让一个元素在盒子中垂直水平居中的公式:

• 让left和top都为50%，margin-left:为子盒子负的宽度的一半;margin-top:为子盒子负的高度的一半

    
            
    
     
    
复制代码

让一个盒子成圆形?

• border-radius:50%(就是小圆点)