用css隐藏元素的几种种方法

大家一看到隐藏元素应该会想到visibility:hidden和display:none，另外的几种您是否能想起来呢？？？

要隐藏的元素为下面的div

<div class = "hide"></div>

　　

用css隐藏元素的几种方法

名称	实现	描述
display:none	.hide{    display:none; }	元素在页面上彻底消失，不占据空间， 会导致浏览器重排和重绘，不可交互
visibility:hidden	.hide{    visibility:hidden; }	元素在页面消失，但是仍然占据空间， 只会导致浏览器的重绘，不会重排。 适用于元素隐藏后，不希望页面布局 发生变化的场景
opacity:0	.hide{    opacity:0; }	设置元素的透明度为0，只是在视觉 上隐藏了元素，元素本身仍然占据着 空间，并影响网页的布局，可交互， 可被读屏软件识别
position	.hide { position: absolute; top: -9999px; left: -9999px; }	假设有一个元素你想要与它交互，但 是你又不想让它影响你的网页布局， 没有合适的属性可以处理这种情况 （opacity 和 visibility 影响布局， display 不影响布局但又无法直接 交互）。在这种情况下，你只能考 虑将元素移出可视区域。这个办法 既不会影响布局，有能让元素保持 可以操作。
position	.hide{ position:absolute; z-index:-1000;/* 不占据空间，无法点击 */ }	通过设置z-index值使其它元素遮 盖该元素也算是一种隐藏，此方法 不占据空间，不可交互，无法点击

转载于:https://www.cnblogs.com/zqcoding/p/7866412.html