CSS（Cascading Style Sheets）是一種用于設(shè)置HTML頁面樣式的語言。通過使用CSS，我們可以為HTML元素添加樣式，包括顏色、大小、布局等。在某些情況下，我們可能希望將一個具有特定樣式的DIV放置在另一個DIV的底部顯示，而不被其內(nèi)容所遮擋。然而，有時候我們會發(fā)現(xiàn)，將一個DIV放置在另一個DIV底部的位置是不可見的。那么，我們該如何解決這個問題呢？
，讓我們來看一個簡單的案例。在下面的示例中，我們有一個包含兩個DIV的父DIV，一個帶有文本的子DIV和一個底部DIV。我們希望底部DIV顯示在子DIV的下方，但實際上它只顯示了一部分，被子DIV內(nèi)容所遮擋：

html
<style>
.parent {
background-color: gray;
padding: 20px;
}
<br>
    .child {
background-color: lightblue;
margin-bottom: 20px;
}
<br>
    .bottom {
background-color: pink;
height: 100px;
}
</style>
<br>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="bottom">
This should be at the bottom.
</div>
</div>

在這個例子中，我們在父DIV中為子DIV和底部DIV分別定義了樣式。margin-bottom: 20px;在子DIV的樣式中定義了一個底部邊距，這樣底部DIV將會位于子DIV下方。然而，底部DIV的一部分仍然被子DIV內(nèi)容遮擋了。
這個問題的原因是，子DIV默認(rèn)情況下是使用正常的文檔流布局進(jìn)行定位的。它在父DIV中占據(jù)了一定的空間，底部DIV也遵循了這個布局，所以它在子DIV下方顯示，但是被子DIV的內(nèi)容遮擋。
為了解決這個問題，我們可以使用CSS的position屬性和float屬性。讓我們來看看如何使用它們來解決我們的問題。
，我們可以使用position: relative;屬性來將子DIV的定位方式設(shè)置為相對定位。這樣，子DIV將會相對于它的正常位置進(jìn)行移動，而不會影響其他元素的布局。接著，我們可以使用float: left;屬性使子DIV浮動到左側(cè)，這樣它將不再占用父DIV的空間，從而讓底部DIV能夠顯示在子DIV的下方。
下面是修改后的代碼：

html
<style>
.parent {
background-color: gray;
padding: 20px;
}
<br>
    .child {
background-color: lightblue;
margin-bottom: 20px;
position: relative;
float: left;
}
<br>
    .bottom {
background-color: pink;
height: 100px;
}
</style>
<br>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="bottom">
This should be at the bottom.
</div>
</div>

通過應(yīng)用這些修改，我們可以看到底部DIV現(xiàn)在正確地顯示在子DIV的下方，而不再被遮擋了。
此外，我們還可以使用CSS的flexbox布局來實現(xiàn)同樣的效果。flexbox是一種現(xiàn)代CSS布局模型，它提供了更靈活和簡潔的方式來實現(xiàn)元素的排列和對齊。讓我們來看一個使用flexbox布局的例子：

html
<style>
.parent {
background-color: gray;
padding: 20px;
display: flex;
flex-direction: column;
}
<br>
    .child {
background-color: lightblue;
margin-bottom: 20px;
}
<br>
    .bottom {
background-color: pink;
height: 100px;
margin-top: auto;
}
</style>
<br>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="bottom">
This should be at the bottom.
</div>
</div>

在這個例子中，我們在父DIV的樣式中使用了display: flex;和flex-direction: column;屬性。這將把父DIV內(nèi)的元素按照垂直方向排列。接著，我們?yōu)榈撞緿IV添加了margin-top: auto;屬性，這樣它將會自動向上填充剩余的空間，并且位于父DIV的底部。
通過這些修改，底部DIV將正確地顯示在子DIV的下方。
起來，當(dāng)我們希望通過CSS將一個DIV放置在另一個DIV的底部顯示，但實際上它被內(nèi)容遮擋時，我們可以使用position屬性和float屬性或者flexbox布局來解決這個問題。這些技術(shù)可以讓我們更好地控制元素的布局和排列，以達(dá)到我們的預(yù)期效果。