Bootstrap 框架为我们提供了一系列类，让我们能够轻松改变元素的位置。它包含五个功能类似于 CSS position 属性的通用类，以及三个额外的辅助类来更精细地控制元素位置。

通用类

• position-static: 它的作用等同于 CSS 中的 position: static; 属性。

示例:

    
    
        h1.text-center {
            color: green;
        }

        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }

        p {
            top: 10px;
            left: 10px;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    

    
    

    



    
    

        

            极客教程
        
        

            

                position-static
            

        
    

    
    
    
    
    

输出:

!bootstrap-position-static

• position-relative: 它的作用等同于 CSS 中的 position: relative; 属性。

示例:

    
    
        h1.text-center {
            color: green;
        }

        div.parent {
            height: 100px;
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }

        p {
            top: 10px;
            left: 10px;
            padding: 2px;
            border: 1px solid blue;
            display: inline-block;
            background: #E3F2FD;
        }
    

    
    

    




    
    

        

            极客教程
        
        

            

                position-relative
            

        
    

    
    
    
    
    

输出:

!bootstrap-position-relative

• position-absolute: 它的作用等同于 CSS 中的 position: absolute; 属性。

示例:

“`html

h1.text-center {

color: green;

}

div.parent {

height: 100px;

width: 400px;