當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

033_CSS相对定位

發布時間：2025/4/17 CSS 83 豆豆

生活随笔收集整理的這篇文章主要介紹了 033_CSS相对定位小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. CSS相對定位

1.1. 相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位, 它將出現在它所在的位置上。然后, 可以通過設置垂直或水平位置, 讓這個元素"相對于"它的起點進行移動。

1.2. 如果將top設置為20px, 那么框將在原位置頂部下面20像素的地方。如果left設置為30像素, 那么會在元素左邊創建30像素的空間, 也就是將元素向右移動。

#box_relative {position: relative;left: 30px;top: 20px; }

1.3. 如下圖所示:

1.4. 注意, 在使用相對定位時, 無論是否進行移動, 元素仍然占據原來的空間。因此, 移動元素會導致它覆蓋其它框。

2. 相對定位例子

2.1. 代碼

<!DOCTYPE html> <html><head><title>相對定位</title><meta charset="utf-8" /><style type="text/css">#img1 {background: red;}#img2 {background: blue; position: relative; top: 20px; left: 30px;}#img3 {background: green;}</style></head><body><img src="CrashBtn.png" id="img1" /><img src="MagicBtn.png" id="img2" /><img src="RefreshBtn.png" id="img3" />3.一切皆為框3.1.div、h1或p元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容, 即"塊框"。3.2.img等元素稱為"行內塊元素", 意味著這些元素在行內顯示為一塊內容, 即"行內塊框"。3.3.span和strong等元素稱為"行內元素", 這是因為它們的內容顯示在行中, 即"行內框"。</body> </html>

2.2. 效果圖

總結

以上是生活随笔為你收集整理的033_CSS相对定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

_CSS