CSS設(shè)置層級(jí)關(guān)系時(shí)，我們可以使用CSS的嵌套規(guī)則來(lái)實(shí)現(xiàn)，下面是一個(gè)簡(jiǎn)單的示例：

.container {
    width: 100%;
    height: 100%;
    position: relative;
}
.container .header {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #333;
}
.container .main {
    width: 100%;
    height: calc(100% - 50px);
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #fff;
}
.container .footer {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #333;
}

在上面的示例中，我們創(chuàng)建了一個(gè)名為.container的容器，并在其中添加了三個(gè)子元素：.header、.main和.footer，每個(gè)子元素都使用position: absolute;來(lái)定位，以確保它們?cè)谄涓冈貎?nèi)部按照層級(jí)關(guān)系正確排列，我們還使用width: 100%;來(lái)確保每個(gè)子元素都填滿其容器的寬度，我們使用height:屬性來(lái)設(shè)置每個(gè)子元素的高度，并使用calc()函數(shù)來(lái)計(jì)算.main元素的高度，以確保它占據(jù)剩余的空間。

通過(guò)這種方法，我們可以輕松地創(chuàng)建出具有層級(jí)關(guān)系的CSS布局，并在其中添加各種交互和樣式效果。