CSS樣式中有一個很常用的屬性,可以將圖片進(jìn)行定位。這個屬性就是position。
在CSS樣式表中,可以使用position屬性將圖片定位到具體位置。position屬性有四種可能的值:
position: static; /* 默認(rèn)值,沒有定位 */ position: relative; /* 相對定位 */ position: absolute; /* 絕對定位 */ position: fixed; /* 固定定位 */
在這四種值中,相對定位和絕對定位比較常用。它們都可以實現(xiàn)對圖片進(jìn)行定位。
相對定位是相對于元素本身位置為基礎(chǔ),移動元素位置。設(shè)置方式如下:
img { position: relative; left: 20px; top: 30px; }
這個例子中,圖片會向右移動20像素,向下移動30像素。
絕對定位是相對于包含該元素的第一個定位元素的位置元素來定位該元素的。如果沒有父元素是定位元素,則是相對于body元素的。設(shè)置方式如下:
img { position: absolute; left: 20px; top: 30px; }
這個例子中,圖片會相對于與之最近的父元素向右移動20像素,向下移動30像素。
使用position屬性來定位圖片,還需要注意z-index屬性。z-index屬性用于控制元素的堆疊順序。具有更高z-index值的元素將會覆蓋具有更低z-index值的元素,因此它對于定位元素的重疊效果非常重要。
總的來說,將圖片進(jìn)行定位可以更好的控制頁面的布局和效果。