建站
咨詢
售后
建站咨詢
新聞中心
CSS是一種強大的樣式表語言，它可以用來控制HTML元素的位置、大小、顏色等樣式，在HTML中，我們可以通過內(nèi)聯(lián)樣式、內(nèi)部樣式表、外部樣式表或者直接在HTML標簽中使用style屬性來設置元素的樣式。
控制div位置的基本方法有兩種：絕對定位和相對定位，絕對定位是相對于最近的已定位祖先元素（而不是相對于視口）進行定位的，如果沒有已定位的祖先元素，那么它的位置相對于最初的包含塊，相對定位是相對于其正常位置進行定位的。
一、絕對定位
絕對定位的元素會脫離正常的文檔流，不占據(jù)空間，我們可以使用top、right、bottom和left屬性來設置元素的位置，這些屬性的值可以是像素值、百分比值或者em單位。
我們可以創(chuàng)建一個絕對定位的div，使其距離頂部10px，距離右側(cè)20px，距離底部30px，距離左側(cè)40px：
This is a div positioned absolutely.
二、相對定位
相對定位的元素會相對于其正常位置進行定位，我們可以使用top、right、bottom和left屬性來設置元素的位置，這些屬性的值可以是像素值、百分比值或者em單位。
我們可以創(chuàng)建一個相對定位的div，使其距離頂部5px，距離右側(cè)10px，距離底部15px，距離左側(cè)20px：
This is a div positioned relatively.
三、固定定位
固定定位的元素會相對于瀏覽器窗口進行定位，我們可以使用top、right、bottom和left屬性來設置元素的位置，這些屬性的值可以是像素值、百分比值或者em單位，如果元素的父元素是靜態(tài)定位的，那么這個元素也是靜態(tài)定位的；如果元素的父元素是相對定位的，那么這個元素也是相對定位的；如果元素的父元素是絕對定位的，那么這個元素也是絕對定位的。
我們可以創(chuàng)建一個固定定位的div，使其距離頂部10px，距離右側(cè)20px，距離底部30px，距離左側(cè)40px：
This is a div positioned fixed.
四、CSS中的flex布局
Flex布局是CSS3新增的一種布局模式，它可以使父元素成為一個flex容器，然后通過flex子項的屬性來控制子項的位置和大小，我們可以使用justify-content、align-items和align-self屬性來設置子項的對齊方式。
我們可以創(chuàng)建一個flex布局的div，使其內(nèi)部的div水平排列并居中對齊：
This is a div in a flex container.
五、CSS中的grid布局
Grid布局是CSS3新增的一種布局模式，它可以使父元素成為一個grid容器，然后通過grid子項的屬性來控制子項的位置和大小，我們可以使用grid-template-columns和grid-template-rows屬性來定義子項的列數(shù)和行數(shù)。
我們可以創(chuàng)建一個grid布局的div，使其內(nèi)部的div按照2列2行排列：
This is a div in a grid container.This is another div in a grid container.
文章名稱：怎么控制div的位置
本文網(wǎng)址：http://www.5511xx.com/article/cosphdi.html
