這篇文章主要介紹了html如何設置文字的位置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
html設置文字位置的方法：首先使用position屬性設置文字元素的定位類型（絕對定位或固定定位）；然后使用top、bottom、left和right屬性設置文字元素偏移值，進而設置文字元素的位置。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
html設置文字位置的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p#p1{
position: absolute;
top: 20px;
left: 20px;
}
p#p2{
position: absolute;
bottom: 0px;
right: 20px;
}
</style>
</head>
<body>
<img src="img/1.jpg" width="400" />
<p id="p1">測試文本！測試文本！</p>
<p id="p2">測試文本！測試文本！</p>
</body>
</html>效果圖：
說明：
position 屬性規定元素的定位類型。
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| relative | 生成相對定位的元素，相對于其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
| static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
top 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
對于相對定義元素，如果 top 和 bottom 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數；如果二者都不是 auto，bottom 將取 top 值的相反數。
bottom 屬性規定元素的底部邊緣。該屬性定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
對于絕對定位元素，bottom屬性設置單位高于/低于包含它的元素的底邊。對于相對定位元素，bottom屬性設置單位高于/低于其正常位置的元素的底邊。
left 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
right 屬性規定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數值，為指定值；否則為 auto。 對于相對定義元素，left 的計算值始終等于 right。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“html如何設置文字的位置”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
