<div>是HTML中的一個標簽，可以用來創建一個塊級元素。按照默認的層疊順序，<div>元素的位置會在上層，遮蓋住其他元素。然而，我們有時候希望將<div>放到下層，使其在視覺上被其他元素遮蓋。本文將介紹如何通過CSS將<div>元素放到下層的幾種方法。
一種常見的方法是使用CSS的z-index屬性來控制元素的層疊順序。z-index屬性決定了元素在層疊上下文中的顯示順序。使用z-index屬性可以將<div>元素的層疊順序調低，使其被其他元素遮蓋。下面是一個示例：

<p><div class="lower-layer"></p>
<p>This is a lower layer div.</p>
<p></div></p>
<p><div class="upper-layer"></p>
<p>This is an upper layer div.</p>
<p></div></p>
<p>.lower-layer {</p>
<p>z-index: -1;</p>
<p>}</p>

在上述代碼中，我們給<div>元素添加了一個類名"lower-layer"，并通過CSS將其z-index屬性設置為-1。這樣，<div>元素就會在層疊上下文中處于下層，并被其他元素遮蓋。
另一種常見的方法是使用CSS的position屬性來控制元素的定位方式。通過將<div>元素的position屬性設置為"relative"，我們可以使其脫離正常的文檔流，并將其他元素覆蓋在上面。下面是一個示例：

<p><div class="lower-layer"></p>
<p>This is a lower layer div.</p>
<p></div></p>
<p><div class="upper-layer"></p>
<p>This is an upper layer div.</p>
<p></div></p>
<p>.lower-layer {</p>
<p>position: relative;</p>
<p>}</p>

在上述代碼中，我們同樣給<div>元素添加了一個類名"lower-layer"，并通過CSS將其position屬性設置為"relative"。這樣，<div>元素就會脫離正常的文檔流，其他元素可以覆蓋在上面。
除了使用z-index屬性和position屬性，我們還可以使用CSS的flexbox布局來控制<div>元素的層疊順序。flexbox布局是CSS3中的一種新的布局模型，可以方便地實現靈活的頁面布局。下面是一個示例：

<p><div class="container"></p>
<p><div class="lower-layer"></p>
<p>This is a lower layer div.</p>
<p></div></p>
<p><div class="upper-layer"></p>
<p>This is an upper layer div.</p>
<p></div></p>
<p></div></p>
<p>.container {</p>
<p>display: flex;</p>
<p>}</p>
<p>.lower-layer {</p>
<p>order: 1;</p>
<p>}</p>
<p>.upper-layer {</p>
<p>order: 2;</p>
<p>}</p>

在上述代碼中，我們創建了一個父容器<div>，并將其display屬性設置為"flex"，以啟用flexbox布局。然后給<div>元素添加了兩個子元素，分別添加了類名"lower-layer"和"upper-layer"。通過設置子元素的order屬性，我們可以控制它們在flexbox布局中的顯示順序，從而實現將<div>元素放到下層的效果。
起來，通過使用CSS的z-index屬性、position屬性和flexbox布局，我們可以將<div>元素放到下層，使其在視覺上被其他元素遮蓋。根據實際需求和具體情況，我們可以選擇其中的一種或多種方法來實現需要的效果。