如果想要讓ul li重疊,可以使用CSS的position屬性。我們可以設(shè)置li元素的position為absolute,并且設(shè)置其z-index值,以便控制疊放順序。
ul { position: relative; /* 相對(duì)定位 */ list-style: none; padding: 0; margin: 0; } li { position: absolute; /* 絕對(duì)定位 */ top: 0; left: 0; z-index: 1; /* 控制疊放順序 */ } li:nth-child(2) { z-index: 2; /* 第二個(gè)li元素疊放在第一個(gè)上面 */ } li:nth-child(3) { z-index: 3; /* 第三個(gè)li元素疊放在第二個(gè)上面 */ } /* 可以設(shè)置li元素的寬高,來(lái)控制疊放后的顯示效果 */ li { width: 100px; height: 100px; background-color: #ccc; } li:nth-child(2) { background-color: #ddd; } li:nth-child(3) { background-color: #eee; }
上述代碼將ul元素的position屬性設(shè)置為relative,將li元素的position屬性設(shè)置為absolute,并且設(shè)置了z-index值,以控制疊放順序。同時(shí),用CSS也可以設(shè)置li元素的寬高和背景色,以實(shí)現(xiàn)更多的樣式效果。
需要注意的是,使用CSS讓ul li重疊并不是通用的布局方式,只適用于特定的場(chǎng)景和需求。使用時(shí)需要根據(jù)實(shí)際情況進(jìn)行調(diào)整,以達(dá)到理想的視覺(jué)效果。