有關css中position其中的語法以及結論
position是 CSS屬性指定的元素如何定位一個文件內top，right，bottom，和left屬性確定定位元素的最終位置。
形式語法：靜態的| 親戚| 絕對的 |粘性| 固定
靜態：元素根據文檔的正常流程定位。的top，right，bottom，left，和z-index性能有任何影響。這是默認值。
親戚：該元件根據文檔的正常流動定位，然後偏移相對於它本身的基礎上的值top，right，bottom，和left。偏移量不會影響任何其他元素的位置; 因此，頁面布局中為元素給出的空間與位置相同static。當值不是時，此值將創建新的堆疊上下文。
絕對的：該元素將從普通文檔流中刪除，並且不會為頁面布局中的元素創建空間。top，right，bottom，和left。當值不是時，此值將創建新的堆疊上下文。絕對定位框的邊距不會與其他邊距一起折疊。
粘性：該元素將從普通文檔流中刪除，並且不會為頁面布局中的元素創建空間。它相對於所述初始位置包含塊通過所建立的視口除了當它的祖先中的一個具有，transform，perspective，或filter屬性設置為比其他的東西none（見CSS轉換規格），在這種情況下祖先表現為包含塊。（請註意，存在與瀏覽器的不一致性perspective和filter有助於包含塊的形成。）其最終位置是由的值確定的
top，right，bottom，和left。此值始終創建新的堆疊上下文。在打印文檔中，元素放置在每個頁面上的相同位置。
固定：該元件根據文檔的正常流動定位，然後偏移相對於它的最近的祖先滾動和包含塊（最接近的塊級祖先），包括表相關的元素的基礎上的值top，right，bottom，和left。偏移量不會影響任何其他元素的位置。此值始終創建新的堆疊上下文。需要註意的是粘性元素“大棒”，以具有“滾動機制”，其最近的祖先（創建時overflow是hidden，scroll，auto，或overlay），即使祖先是不是最近的實際滾動的祖先。這有效地抑制了任何“粘性”行為。
實例：html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="09211position.css">
<title>grid</title>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
css:
#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
background-color: green;
width: 50px;
height: 50px;
}
有關css中position其中的語法以及結論