CSS 屏幕左上角是一個(gè)比較常見的需求,它可以在網(wǎng)頁(yè)上顯示提示信息、Logo 或?qū)Ш綑诘仍亍_@里提供兩種實(shí)現(xiàn)方式。
一、使用絕對(duì)定位實(shí)現(xiàn)
.element { position: absolute; left: 0; top: 0; }
通過(guò)設(shè)置元素的 position 屬性為 absolute 并設(shè)置 left 和 top 屬性均為 0,可以將元素定位在屏幕左上角。
二、使用 flex 布局實(shí)現(xiàn)
.container { display: flex; justify-content: flex-start; align-items: flex-start; /* 也可以直接設(shè)置為: */ /* justify-content: start; */ /* align-items: start; */ } .element { /* 可以省略 */ /* position: relative; */ }
容器元素設(shè)置 display 屬性為 flex,并設(shè)置 justify-content 和 align-items 屬性均為 flex-start 或 start,可以使容器元素和其子元素都靠左上對(duì)齊。
以上代碼僅為示例,請(qǐng)根據(jù)實(shí)際需求進(jìn)行調(diào)整。