我不明白為什么當我更改position為時relative，“facebook 和 Facebook 可以幫助您與生活中的人聯系和分享”位于頁面頂部。我剛開始學習 css 三天。謝謝！！！！
這是html檔案
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="henry.css">
</head>
<body>
<div class="h1">
<h1 class="h">facebook</h1>
<p class="pr">Facebook helps you connect and share with the people in your life.</p>
</div>
</body>
</html>
css檔案
.h1{
position: absolute;
left: 10%;
top: 40%;
width: 550px;
}
uj5u.com熱心網友回復：
如果您需要對齊元素，請先嘗試flexbox（請記住flex在父元素上添加您想要對齊的內容）：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/
經過一些與 flexbox 的斗爭后，嘗試與以下內容保持一致grid：https ://www.w3schools.com/css/css_grid.asp
FLEXBOX X 網格：
Flexbox：單向對齊，將帖子串列中的所有元素垂直對齊
網格：雙向對齊，通常用于構建頁面的位置，它們將是“頁眉、頁腳、選單、正文……”，在 FOOTER 中，您可以使用 flexbox，非常常見
（乍一看很難，但總有一天對你有意義：D）
這些屬性（flexbox、grid..）是一種流體結構，其中一個 HTML 元素會干擾/支持另一個元素，嘗試在“檢查元素”（在瀏覽器中）并嘗試洗掉一些 HTML 節點，如DIVs、SPANs... 并查看如何在螢屏中表現元素。
在這些元素內添加一個div（等于您創建的）絕對位置。并在檢查元素（在瀏覽器中）并洗掉這些元素。您將了解元素位置“將其輸出”到元素干擾另一個位置的結構。
uj5u.com熱心網友回復：
position:absolute 相對于它的第一個非靜態祖先元素定位元素。在這種情況下，包含這兩個句子的類名為“h1”的 div 具有標簽作為 ancenstor：這使您的 div 位于頂部。
小提示：避免將關鍵字作為類名，這可能會造成混淆。我會切換到 或
uj5u.com熱心網友回復：
position: relative 不能使用 top、bottom、left 或 right 對齊。相反，它的位置基于其他元素的位置。由于 DOM 中沒有其他元素，因此該元素將位于頂部。位置：絕對，這是我假設您之前使用的忽略所有其他元素。如果你想給這個 div 一個偏移量，使用 margin 屬性。（上邊距、左邊距、下邊距、右邊距）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494656.html
下一篇：如何限制行內錨元素的寬度？