對(duì)于前端開發(fā)而言，CSS定位是非常重要的一部分。利用CSS定位，我們可以輕松地控制HTML元素的位置、大小和排列方式。但是，在實(shí)際應(yīng)用中，往往會(huì)出現(xiàn)一些問(wèn)題，譬如CSS定位圖被擋住的情況。

<code>
.container {
position: relative;
width: 600px;
height: 600px;
background-color: #eee;
}
.image {
position: absolute;
top: 50px;
left: 50px;
width: 500px;
height: 500px;
background-image: url('image.png');
background-size: cover;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(0,0,0,0.5);
}
</code>

以上是一段CSS代碼，其中有一個(gè)容器.container，里面包含著一張背景圖片.image和一個(gè)覆蓋在圖片上方的蒙板.mask。但是，我們可能會(huì)發(fā)現(xiàn)，當(dāng).mask的高度超出了50px之后，圖片就會(huì)被擋住了。

為什么會(huì)出現(xiàn)這種情況呢？其實(shí)，這主要是因?yàn)镃SS定位會(huì)影響HTML元素的層疊順序。在上面的代碼中，由于.mask的z-index值默認(rèn)為0，而.image的z-index為1，因此當(dāng).mask的高度超過(guò)50px時(shí)，就會(huì)覆蓋在.image之上，導(dǎo)致圖片被擋住。

那么，對(duì)于這種情況，該如何解決呢？其實(shí)也很簡(jiǎn)單，只需要給.mask設(shè)置一個(gè)更大的z-index值即可，代碼如下：

<code>
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
</code>

這樣一來(lái)，即使.mask的高度超過(guò)了圖片的高度，圖片仍然能夠顯示在上方，而不會(huì)被覆蓋。

總結(jié)來(lái)說(shuō)，CSS定位是前端開發(fā)中必不可少的一部分，但是在應(yīng)用過(guò)程中也需要注意層疊順序的問(wèn)題，避免出現(xiàn)元素被擋住的情況。