<div>遮住了，這是前端開發(fā)中常常碰到的一個(gè)問題。顧名思義，<div>是一種HTML標(biāo)簽，用于創(chuàng)建一個(gè)可定位、可排版的矩形區(qū)域。然而，有時(shí)候我們會(huì)發(fā)現(xiàn)一個(gè)<div>無法被其他元素完全顯示，而被其他元素遮住了一部分。本文將通過幾個(gè)代碼案例，詳細(xì)解釋說明這個(gè)問題和解決方法。

，我們來看一個(gè)簡(jiǎn)單的案例。假設(shè)我們有一個(gè)<div>，希望將其放在一個(gè)容器中并居中顯示。我們可以使用以下的HTML和CSS代碼實(shí)現(xiàn)這個(gè)效果：

<style>
.container {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
<br>
  .box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<br>
<div class="container">
<div class="box"></div>
</div>

在這個(gè)案例中，我們創(chuàng)建了一個(gè)容器<div>，寬高設(shè)置為200px，并設(shè)置了邊框。然后，我們使用了Flex布局將其中的內(nèi)容居中顯示。內(nèi)部的<div>被設(shè)置為寬高均為100px的紅色框。這樣，我們就實(shí)現(xiàn)了一個(gè)將<div>居中顯示的效果。

然而，當(dāng)我們將這段代碼復(fù)制到一個(gè)空的HTML文件中并運(yùn)行時(shí)，可能會(huì)發(fā)現(xiàn)紅色框只顯示了一半，被容器遮住了一部分。這是因?yàn)槿萜鞯膶捀咴O(shè)置限制了<div>的顯示區(qū)域，超出部分被遮住了。

那么，如何解決這個(gè)問題呢？有幾種常用的方法可以嘗試：

1. 調(diào)整容器的寬高：可以通過修改容器的寬高，使其能夠完整顯示<div>，例如增加容器的寬度和高度為300px。

.container {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}

2. 使用定位屬性：可以將容器的position屬性設(shè)置為relative，并給內(nèi)部的<div>添加position屬性設(shè)置為absolute。然后，通過調(diào)整<div>的top、bottom、left和right值，使其在容器中按照要求的位置顯示。

.container {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
<br>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

通過將容器設(shè)置為相對(duì)定位，再通過絕對(duì)定位將<div>放置在容器的中心位置，我們可以解決遮住的問題。

3. 調(diào)整z-index屬性：當(dāng)頁面中存在多個(gè)重疊的元素時(shí)，可以通過調(diào)整元素的z-index值來改變它們的層疊順序。將需要顯示在最上層的<div>的z-index屬性設(shè)置為較大的值，可以確保它不會(huì)被其他元素遮住。

.container {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
<br>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
<br>
.another-box {
width: 150px;
height: 150px;
background-color: blue;
position: absolute;
top: 70px;
left: 70px;
z-index: 1;
}

通過將需要顯示在最上層的<div>的z-index值設(shè)置為2，我們可以確保它位于另一個(gè)設(shè)置為z-index為1的<div>的上方，從而解決遮住的問題。

總之，當(dāng)我們?cè)谇岸碎_發(fā)中遇到<div>被其他元素遮住的情況時(shí)，可以通過調(diào)整容器的寬高、使用定位屬性或調(diào)整z-index屬性來解決。這些方法都可以根據(jù)具體情況來選擇使用，以便達(dá)到預(yù)期的效果。