css樣式中position屬性absolute以及relative水平置中

來源:互聯網
上載者:User
首先我們要瞭解樣式中的這兩種定位;

absolute(絕對位置):將被賦予的對象從文檔流中拖出,使用left,right,top,bottom等屬性相對於最接近的一個最有定位設定的父級對象進行絕對位置,如果父級沒有進行定位屬性設定,則按照預設規則來設定(根據body左上方作為參考進行定位),同時絕對位置的對象可層疊。

relative(相對定位):對象不可重疊,使用left,right,top,bottom等屬性在正常的文檔流中進行定位,其對象不可以層疊。

置中:

1,對於使用了absolute定位的對象為了達到自適應置中的效果,要設定其作用對象的寬度;例如以下代碼實現的置中

.ceshi    {         position:absolute;        bottom: 10%;        display: block;        width: 250px;        left:50%;        margin-left:-125px;        }

2,對於使用了relative定位的對象達到置中的效果,因為其在正常的文檔流中,所以其參考對象為其自身,可以進行如下設定:

.ceshi2{margin:0 auto;}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.