CSS中層與層之間的控制是十分常見的操作,其中一個層可以通過指定選擇器控制另一個層,這種層之間的控制可以實現很多有趣的效果。
/*例如,我們可以定義一個div層*/ div{width:200px;height:200px;border:1px solid #999;} /*然后再定義一個相對于div層的子層*/ div p{position:relative;top:-50px;text-align:center;} /*這樣就可以將p層相對于div層上移,并居中對齊*/ <div> <p>我是一個子層</p> </div>
在上述代碼中,我們先定義了一個div層,并且設置它的寬高和邊框,接著我們再給這個div層的子層p定義樣式,在上述代碼中,我們通過設置p層的position屬性為relative,然后再設置top屬性為-50px,就可以將p層相對于div層上移了50px。
除了以上的例子,我們還可以使用z-index屬性來控制層之間的重疊,z-index值越大的層就會覆蓋z-index值小的層。例如:
/*定義兩個div層*/ div:first-of-type{width:200px;height:200px;background-color:#FF6347;} div:last-of-type{width:150px;height:150px;background-color:#ADD8E6;} /*為第二個div層設置z-index屬性*/ div:last-of-type{position:relative;z-index:1;} <div></div> <div></div>
在上述代碼中,首先我們定義了兩個div層,并設置它們的寬高和背景顏色,然后我們給第二個div層設置了z-index屬性,將它的值設為1。這樣第二個div層就會出現在第一個div層的上面。
在實際開發中,使用層之間的控制可以為我們帶來很多便利,也可以實現很多有趣的效果,因此,我們需要掌握好這種技巧,并在開發中靈活運用。