CSS是一種用于網(wǎng)頁設(shè)計和排版的計算機(jī)語言,其中定位元素的關(guān)系是使用CSS的一個重要部分。在CSS中,它使用position屬性來設(shè)置定位元素的關(guān)系。 position屬性有5個值:
1. static
默認(rèn)值,不定位元素,遵循文檔流。
例: pre {
position:static;
}
2. relative
元素相對自身原來的位置進(jìn)行定位,left、top、right、bottom屬性確定元素在文檔中的位置。
例: pre {
position:relative;
left:20px;
top:-10px;
}
3. absolute
元素相對于離它最近的已定位父元素或body元素進(jìn)行定位,left、top、right、bottom屬性確定元素在文檔中的位置。
例: pre {
position:absolute;
right:20px;
top:50px;
}
4. fixed
元素相對于瀏覽器窗口視口進(jìn)行定位。left、top、right、bottom屬性確定元素在瀏覽器中的位置。
例: pre {
position:fixed;
bottom:0;
right:0;
width:100px;
height:40px;
background-color:#ccc;
}
5. sticky
元素在超出指定區(qū)域前為相對定位,超出指定區(qū)域后為固定定位。
例: pre {
position: sticky;
top: 0;
}
這些屬性可以單獨(dú)使用或一起使用,可以通過這些屬性將元素定位在頁面的任何位置。了解這些屬性的作用和使用方法可以更好地控制定位元素的關(guān)系,使頁面看起來更加美觀和專業(yè)。
上一篇CSS定位與DIV布局_
下一篇css定義表格上下滾動條