两分钟！教你学会CSS的定位方式

  其实想要学会CSS的定位方式很简单，只需要两分钟！

一、固定定位

1.定义：页面动而自身不动。一般用于广告栏，回到顶部等小窗口

2.注意事项

①参照物：固定定位的参照物是当前窗口
②位置：通过设置left right top button改变位置。一般left和right，top和button设置一个即可
③占位特点：不占位，脱离标准流，变成行内块
④中心居中的设置
4-1 水平居中
 left: 50%;
 margin-left: -宽度的一半;
 transform：translateX（50%）
4-2 垂直居中
 top: 50%;
 margin-top: -高度的一半;
 transform：translateY（50%）

    
    
    


    
固定定位方式

固定定位.png

二、绝对定位

1.定义：一个标签漂浮在另外一个标签上面

2.注意事项

①参照物：子级绝对定位，会一直向上寻找到有定位方式的标签，以该标签作为参照物。
②占位特点：不占位，脱离标准流
③子级和父级的定位方式：一般子级绝对定位，父级最好要相对定位，这是为了确保网页的稳定性。当然父级也可以不用相对定位，取决于个人喜好
④位置：通过设置left right top button改变位置。一般left和right，top和button设置一个

    
        
        
        
        
    
        

            

                
                
这是文字
            
        
    

绝对定位.png

  在这个例子中，p设置了绝对定位，li设置了相对定位然后通过四个方位来调整位置。从这个例子中可以看出，绝对定位一般用在文字漂浮在图片的的上方等的场合

三、相对定位

1.定义：相对自身的位移变化，等价于身体不动但是影子在动，所以对别人的影响很小。一般用来处理标签位置的微调。

2.注意事项

①参照物：相对定位的参照物是该标签本身
②位置：可以通过设置left right top button 改变标签的位置
③占位特点：相对定位是半标准流。一是因为标签自身占位置，符合标准流的特点，二是可以通过四个方向坐标值改变自己的位置，这四个方向坐标值只有非标准流中才有，所以说相对定位是半标准流

    
    
    


    
    
相对定位

相对定位.png

  在这个例子中可以看出，img标签仍然占据了原来的位子，所以p标签并没有浮动上去。

最后补充定位方式有关的样式--z-index

1.定义：调整图层顺序。一般默认后写的顺组在上面

2.注意事项

①使用场景：只有有了定位方式的标签才有 z-index，并且只要设置的z-index值比原来的值大就可以显示，一般默认的值是1.
②数值取值范围：可以是正值也可以是负值，但是不建议使用负值，不便于审查元素，不利于样式的使用
③作用效果：只有在同级的标签比较才有效