在網站設計中，有時需要根據用戶的操作使一些元素在特定的時候顯示或隱藏。CSS中的定位可以實現此功能。如果要隱藏一個元素，可以使用display屬性設置為none。當用戶觸發某個事件時，可以通過JavaScript來更改元素的display屬性，使其顯示出來。
但是，使用這種方法會使代碼變得很冗長，而且會導致頁面加載速度變慢。因此，可以使用CSS中的定位屬性來實現這個功能。我們可以將元素的位置設置為超出父元素的可見區域，這樣元素就會被隱藏起來。
定位屬性有多種，包括相對定位、絕對定位和固定定位。使用相對定位時，元素的位置相對于它原本的位置移動，而不是相對于其他元素。使用絕對定位時，元素的位置相對于最近的已定位的祖先元素。使用固定定位時，元素的位置相對于瀏覽器窗口固定，不受滾動影響。
為了實現劃入顯示隱藏的功能，可以在需要隱藏的元素上使用絕對定位，并將其位置設置為超出父元素的可見區域，如下所示：

p {
position: relative;
}
<br>
.hide {
position: absolute;
top: -9999px;
}

此時，需要隱藏的元素的類名為hide。將其top屬性設置為負數可以將其位置移動到父元素的上方，使其不可見。如果僅僅使用這個代碼，元素處于隱藏狀態，不能顯示。因此，需要使用:hover偽類選擇器，當鼠標懸停在父元素上時，顯示需要隱藏的元素。

p:hover .hide {
top: auto;
}

這個代碼將.hide類在:hover狀態下的top屬性值設置為auto，這意味著元素的位置將會被還原，從而顯示出來。
以上就是使用CSS定位實現劃入顯示隱藏的方法，我們可以通過這個方法來實現鼠標懸停時彈出菜單等效果，而不會使代碼變得冗長和復雜。