在網(wǎng)頁(yè)設(shè)計(jì)中，CSS定位是至關(guān)重要的。通過(guò)定位，我們可以將元素放置在需要的位置，以便展示精美的頁(yè)面。本文將向你介紹如何在屏幕內(nèi)正確定位規(guī)劃好的元素。

/* 
在 CSS 中，我們可以使用以下屬性來(lái)控制元素的定位： 
? position 
? top 
? bottom 
? left 
? right 
*/
/*position屬性（定位類(lèi)型）*/ 
/*static（默認(rèn)值） 
默認(rèn)狀態(tài)下，不應(yīng)用任何定位。即元素遵循文檔流，位置由其在 HTML 中的布局決定。
*/
div.test{
position: static;
}
/*relative（相對(duì)定位） 
相對(duì)定位元素相對(duì)于自身原來(lái)所在位置進(jìn)行移動(dòng)。
*/
div.test{
position: relative;
left: 20px;
top: 10px;
}
/*absolute（絕對(duì)定位） 
絕對(duì)定位元素相對(duì)于最近的具有位置屬性的父元素進(jìn)行定位。
*/
div.test{
position: absolute;
left: 20px;
top: 10px;
}
/*fixed（固定定位） 
固定定位將元素相對(duì)于視口進(jìn)行定位，因此在滾動(dòng)頁(yè)面時(shí)，元素也會(huì)保持在相對(duì)位置。
*/
div.test{
position: fixed;
left: 20px;
top: 10px;
}
/*top, bottom, left, right屬性*/
/*這些屬性用于相對(duì)或絕對(duì)定位元素的精確定位。*/
div.test{
position: relative; /*或absolute，fixed*/
top: 20px;
left: 10px;
}

對(duì)于定位的元素，通常需要設(shè)置其父元素的position屬性為relative或absolute，以便正確相對(duì)定位。同時(shí)，我們也可以通過(guò)盒模型中的內(nèi)邊距來(lái)給元素留出位置。CSS定位可以幫助我們?cè)谄聊粌?nèi)準(zhǔn)確地放置元素，進(jìn)而實(shí)現(xiàn)視覺(jué)上的精美效果。