在 css 中設(shè)置 img 圖片位置,需要指定定位類型 (static、relative 或 absolute),然后使用 top、right、bottom 和 left 屬性設(shè)置位置偏移量。這些偏移量指定圖片相對于其定位類型的位置。
CSS 中如何設(shè)置 img 圖片位置
在 CSS 中,可以通過 position
、top
、right
、bottom
和 left
屬性來設(shè)置圖片的位置。
1. 定位類型
首先,需要設(shè)置圖片的定位類型。有以下三種定位類型:
static(默認(rèn)):圖片位于其正常流位置。
relative:圖片相對于其正常流位置進(jìn)行偏移。
absolute:圖片相對于其父元素進(jìn)行定位,脫離正常流。
2. 位置偏移量
使用 top
、right
、bottom
和 left
屬性設(shè)置圖片相對于其定位類型的位置偏移量:
top
:相對于圖片頂部邊框的偏移量。
right
:相對于圖片右側(cè)邊框的偏移量。
bottom
:相對于圖片底部邊框的偏移量。
left
:相對于圖片左側(cè)邊框的偏移量。
示例
要將圖片絕對定位在頁面右下角,可以這樣設(shè)置:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">img { position: absolute; bottom: 0px; right: 0px; }</code>
登錄后復(fù)制
其他提示
偏移量值可以是像素(px)、百分比(%)或關(guān)鍵字(例如 auto
)。
如果設(shè)置了多個位置屬性,它們將以以下優(yōu)先級應(yīng)用:top
、right
、bottom
、left
。
當(dāng)使用 absolute
定位時,圖片將從正常流中脫離,意味著它不會再占據(jù)空間。
使用 z-index
屬性可以控制圖片在重疊元素中的層疊順序。