html中的定位position以及浮動float如何使用？

語法：

position：static （靜態定位） |  absolute （絕對定位） |  fixed （固定定位） |  relative  （相對定位）

屬性參數：

static：靜態定位，無特殊定位，物件遵循HTML定位規則（html的預設狀態）

absolute：絕對定位，物件脫離文件流，需要使用left、top、right、bottom等屬性進行精確地定位。可以運用z-index屬性進行層疊。 （使用絕對定位時如果出現元素飄動，沒有在你指定的位置上，可以在元素的父級元素上使用相對定位。「個人建議」）

relative：相對定位，物件不脫離文檔流，無法像absolute一樣進行層疊，但仍要使用left、top、right、bottom等屬性進行正常文檔流中相對原來的物件位置進行移動，原位會被其他元素佔據。

fixed：固定定位，脫離文件流，可以使元素在螢幕上保持固定位置，即使滾動條下拉元素位置也不會改變。

<p  style="border=“1px  solid red；position：absolute；top：150px；left：200px；">我是p111111</p>

    p111111會向下移動150px、向右移動200px處

<p  style="border=“1px  solid red；position：absolute；bottom：50px；right：100px；">我是p222222</p>

　　p222222會往移動到距離底部150px、距離框100px右邊

##當你要當你要做右邊我要做一個總是在頁面右下角顯示的模組時使用  position：fixed；bottom：50px；right：50px；可以使p在距離底部50px和右邊框50px處顯示且不管你的頁面怎麼改變，p一直會顯示在你可視範圍內的相同位置

z-index：100px；後面跟的像素越大p所在的層級越高

語法：

float：left  |  left |  none；向右、向左或不使用（預設）

float：脫離文件流，浮動是相對於父級元素進行的浮動

<p  id="p1">
　　<p  id="p2"></p>
</p>

如上：p1為p2的父級元素p2只能在p1裡面進行浮動

浮動的一個常用的情形，就是水平導航條的運用。水平導航條有兩種方式可以實現，只要將li 標籤的display屬性改為行內樣式，就可以讓列表平鋪，這是核心部分，但是在了解盒子模型我們可以知道，行內標籤的  margin、padding對上下方向是無效的，這裡只能讓清單選項的左右拉長，上下是不會被控制的，區塊級標籤上下才會被控制。

float也是簡單的一些文字環繞圖片效果的運用將圖片和文字放入同一個p內然後給圖片和p一個float：left  |  right；

<p   style="width:220px;height:300px;float:left;">
　　<img  src="/static/imghwm/default1.png"  data-src=".."  class="lazy"        style="max-width:90%"/ alt="html中的定位position以及浮動float如何使用？" >这里是文字654651进行图文混排以及文字环绕kj dsh gkjh kjh jb kjf bg kjs dh fkj gh kj sd hjf hk jk jsh kjg hk
</p>

# 

以上是html中的定位position以及浮動float如何使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！