1. 首頁 > 科技 > >

|干貨！html定位的幾種方式！

|干貨！html定位的幾種方式！

文章圖片

|干貨！html定位的幾種方式！

文章圖片

|干貨！html定位的幾種方式！

文章圖片


1.html定位的幾種方式:html定位主要分為5種：靜態定位、相對定位、絕對定位、固定定位、粘性定位
2.html定位實現的語法：要想實現html定位需要設置兩個選項：定位的類型+定位的位置 。 其中定位的類型分為上述幾種定位的類型：靜態定位（static）、相對定位（relative）、絕對定位(absolute)、固定定位（fixed）、粘性定位（sticky） 。
定位的位置主要分為上（top）、下（bottom）、左（left）、右(right) 。

3.html靜態定位當我們沒有指定定位方式的時候 ， 這時默認的定位方式就是static ， 也就是按照文檔的書寫布局自動分配在一個合適的地方 ， 這種定位方式用margin來改變位置 ， 對left、top、z-index等設置值無效 ， 這種定位不脫離文檔流；


4.html相對定位的特點以及應用：1）相對定位是對于它本身而言進行位置的移動 。
①舉例：如下圖是300x300像素的div盒子

②假如我們將div這個盒子設置了相對定位如下：

③我們可以通過下圖看到 ， 這個div盒子就相對于它本身向下偏移了10像素

2）需要注意的是 ， 相對定位雖然發生了位置移動但是仍舊保留原來的位置 ， 其他元素不能占據他原先位置 ， 如下圖；
【|干貨！html定位的幾種方式！】

    相關經驗推薦