033_CSS相对定位
生活随笔
收集整理的這篇文章主要介紹了
033_CSS相对定位
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. CSS相對定位
1.1. 相對定位是一個非常容易掌握的概念。如果對一個元素進(jìn)行相對定位, 它將出現(xiàn)在它所在的位置上。然后, 可以通過設(shè)置垂直或水平位置, 讓這個元素"相對于"它的起點(diǎn)進(jìn)行移動。
1.2. 如果將top設(shè)置為20px, 那么框?qū)⒃谠恢庙敳肯旅?0像素的地方。如果left設(shè)置為30像素, 那么會在元素左邊創(chuàng)建30像素的空間, 也就是將元素向右移動。
#box_relative {position: relative;left: 30px;top: 20px; }1.3. 如下圖所示:
1.4. 注意, 在使用相對定位時, 無論是否進(jìn)行移動, 元素仍然占據(jù)原來的空間。因此, 移動元素會導(dǎo)致它覆蓋其它框。
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元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內(nèi)容, 即"塊框"。3.2.img等元素稱為"行內(nèi)塊元素", 意味著這些元素在行內(nèi)顯示為一塊內(nèi)容, 即"行內(nèi)塊框"。3.3.span和strong等元素稱為"行內(nèi)元素", 這是因?yàn)樗鼈兊膬?nèi)容顯示在行中, 即"行內(nèi)框"。</body> </html>2.2. 效果圖
總結(jié)
以上是生活随笔為你收集整理的033_CSS相对定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 032_CSS定位
- 下一篇： 034_CSS绝对定位