1.opacity
opacity：0將元素本身及其子元素都置為不可見的，而元素本身依然佔據它自己的位置並對網頁的布局起作用，它會響應使用者互動。
2.visibility
visibility：hidden將元素本身及其子元素都置為不可見的，而元素本身依然佔據它自己的位置並對網頁的布局起作用，它不會響應使用者互動。如果想讓子元素顯示，則設定子元素的visibility：visibility；
3.display
display:none使用這個屬性，被隱藏的元素對網頁的布局不起作用。不僅如此，一旦display設為none任何對該元素直接的使用者互動操作都不可能生效。此外，讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。通過dom依然可以訪問到這個元素。因此你可以通過dom來操作它。
4.position
position:absolute 將top和left設定成足夠大的負數，相當於把元素放到可視區域外，它不會影響布局，能夠讓元素保持可操作性，在讀屏軟體上可以被識別。
總結一下：opacity,visibility影響布局，前者不影響互動，後者影響互動；
display不影響布局，影響互動；
position 不影響布局，不影響互動；
下面給出例子：可以自行除錯
"en">class="
div1
">1
class="
div2
">2
class="
div2-2
">2-2
class="
div3
">3
class="
div4
">4
5.通過z-index隱藏
CSS隱藏元素的方法
使用css隱藏元素的主要方式有diaplay none opacity 0 visibility hidden position absolute overflow hidden clip path polygon 0 0,0 0,0 0,0 0 height 0 overflow hidden d...
CSS3 3種隱藏元素方法的區別
目錄dom結構 瀏覽器不會渲染display none的元素,並且不佔據頁面空間 事件監聽 無法對元素進行事件監聽 繼承 不會被子元素繼承 子元素設定display block不會顯示 改動 改動屬性值會引起頁面的重排和重繪 過渡 無法設定過渡效果transition display無效 不會被渲染...
css隱藏頁面元素的方法
用css隱藏頁面元素有許多種方法。第一種方法 opacity 0 opacity屬性通常用於設定乙個元素的透明度，從另乙個角度來看，如果透明度為0，也就從視覺上隱藏了該元素。這個屬性不是為改變元素的邊界框 bounding box 而設計的，元素本身依然佔據它自己的位置並對網頁的布局起作用，它也將響...