第一個案例是通過使用div遮住控件實現模態框效果。模態框是一種常見的用戶交互方式，它可以在頁面上顯示一些重要的信息或提示，并阻止用戶對頁面上其它內容進行操作。以下是一個簡單的實現示例：
<div class="modal-overlay"></div>
<div class="modal-content">
<h2>提示信息</h2>
<p>這是一個模態框提示內容。</p>
<button class="close-btn">關閉</button>
</div>上述代碼中，modal-overlay和modal-content是兩個div元素，其中modal-overlay用于遮住整個頁面，使用戶無法操作其他內容。modal-content包含了提示信息和關閉按鈕等內容。通過設置modal-overlay的CSS樣式，使其覆蓋整個頁面，并設置半透明的背景色。這樣一來，模態框就實現了遮住控件的效果，用戶只能操作模態框上的內容，從而提醒用戶關注其中的信息。
第二個案例是使用div遮住控件實現圖片縮放效果。當鼠標懸停在圖片上時，顯示一個半透明的遮罩層，并以某種方式縮放圖片。以下是一個示例代碼：
<div class="image-container">
<img src="image.jpg" alt="圖片" />
<div class="image-overlay"></div>
</div>在上述代碼中，image-container是包裹圖片的div容器，image-overlay是用于遮罩的div元素。通過設置image-overlay的CSS樣式，使其半透明并覆蓋在圖片上方。同時，可以使用CSS的transform屬性和transition屬性來實現圖片縮放效果。當鼠標懸停在圖片上時，通過改變image-overlay的大小和位置，以及改變圖片的大小，就可以給用戶帶來一種交互效果，增加頁面的動感和吸引力。
以上只是div遮住控件的兩個簡單案例，實際上，通過合理使用CSS和div元素，還可以實現更多更復雜的效果和布局。在現實生活中，我們可以看到很多網站和應用程序都使用了div遮住控件的技術，例如彈出菜單、導航欄、輪播圖等等。通過靈活運用這一技術，可以提升用戶體驗，增強頁面的交互性和視覺效果。
總之，div遮住控件是一種常見的前端開發技術，它可以通過設置div元素的樣式來覆蓋其它控件，實現一些特定的效果和布局。通過上述案例的介紹，希望能夠對這一概念有一個清晰的理解，并在實際開發中靈活運用，為用戶帶來更好的體驗。