CSS是前端開發中非常重要的一部分，可以讓網頁變得更加美觀和有吸引力。但是有時候我們會發現CSS樣式被其他元素覆蓋了，從而導致網頁顯示異常。下面我們來探討一下這個問題。

<div class="box">
<p class="content">Hello world!</p>
</div>
.box {
width: 200px;
height: 200px;
background-color: #ccc;
}
.content {
font-size: 30px;
color: red;
position: absolute;
left: 0;
top: 0;
}

上面的代碼可以看到，我們有一個class為“box”的div容器，里面嵌套了一個p標簽，class為“content”。我們為.box設置了背景顏色，為.content設置了字體大小、顏色和絕對定位，這意味著我們可以通過改變left和top屬性控制它的位置。

但是，當我們運行這段代碼時，我們會發現文字被div容器的背景顏色覆蓋了，這顯然不是我們想要的結果。為什么會這樣呢？

這是因為我們設置了.content的position屬性為“absolute”。這會使它脫離了文檔流，并且相對于最近的已定位祖先元素（.box）定位。但是，由于我們沒有給.box設置position屬性，所以它并沒有形成定位上下文。換句話說，.content相對于文檔根元素進行定位，而不是.box。

解決這個問題的方法是為.box設置position：relative。這會使.box成為一個定位上下文，使.content相對于.box進行定位。下面是修改后的代碼：

<div class="box">
<p class="content">Hello world!</p>
</div>
.box {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
}
.content {
font-size: 30px;
color: red;
position: absolute;
left: 0;
top: 0;
}

現在，我們的.content元素已經正確地相對于.box定位了。這個問題雖然看起來很小，但當你在進行頁面設計時，它可能會變得非常棘手。所以，一定要了解如何解決這個問題。