CSS 定位元素

WBOY轉載: 2023-09-16 09:01:091249瀏覽

position 屬性用於定位元素。即以下是定位元素 -

static - 元素框被佈置為正常文件流的一部分，如下前面的元素和前面的後面的元素。
relative - 元素的方塊被佈局為正常流的一部分，然後偏移一些距離。
絕對- 元素的方塊相對於其包含區塊進行佈局，並且完全從文件的正常流程中移除。
固定- 元素的框是絕對定位的，具有針對位置描述的所有行為：絕對。

以下是使用CSS 定位元素的程式碼-

範例

即時示範

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   color: white;
   text-align: center;
   height: 100px;
   width: 100px;
}
.static {
   position: static;
   background-color: greenyellow;
}
.relative {
   position: relative;
   left: 50px;
   background-color: rgb(255, 47, 47);
}
.absolute {
   position: absolute;
   right: 50px;
   top: 20px;
   background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>

輸出

上面的程式碼將產生以下輸出-

CSS 定位元素

以上是CSS 定位元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css Static position

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 CSS 選擇元素的所有子元素（除了最後一個子元素）？下一篇：如何使用 CSS 選擇元素的所有子元素（除了最後一個子元素）？

看更多