5秒后使用CSS删除重叠的div答案

【问题标题】：Using CSS to remove overlapped div after 5 seconds5秒后使用CSS删除重叠的div
【发布时间】：2017-11-30 06:22:21
【问题描述】：

我的页面有一个重叠的 div，它将在 5 秒后隐藏。但是，我意识到 div 后面的按钮无法按下，因为 div 在 5 秒后仍然存在。

要删除 div，我尝试使用 display:none，但它不起作用。

这是我的 CSS：

.ox-messages {
    -webkit-animation: seconds 1.0s forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 5s;
    animation: seconds 1.0s forwards;
    animation-iteration-count: 1;
    animation-delay: 5s;
    position: relative;
}

@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px;
    //display: none;
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
    //display: none;
  }
}

问题如下：

警报消息（绿色）与按钮（注释加号图标）重叠。

请帮忙，谢谢。

编辑：我将position:relative 更改为position:absolute，它不会阻止按钮但消息会堆叠在一起。

【问题讨论】：

你能分享一个完整的代码吗？所以我们也可以看到按钮和问题
对不起，我不能分享完整的 html 代码。我会贴一张截图。
display: none 应该有效。考虑在有问题的隐藏元素上声明pointer-events: none。或者在你的按钮上声明一个position 属性，这样你就可以通过对它们应用z-index 属性来利用堆栈上下文。
Sorry I can't share the complete html code. 我们也很抱歉，但我们无法提供屏幕截图
我已经编辑了我的问题。请看一看。

标签： css

【解决方案1】：

请随意复制并粘贴此代码到任何 html 编辑器（或按下面的代码 sn-p），您会看到 JavaScript 函数确实会删除 div。在这个例子中，网站中不会显示任何文本，因为我们使用 JavaScript 删除了包含文本的 div：

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	
<div id="div_we_want_to_remove">
    <!-- We will not see the following text on the webpage if we execute the the JavaScript code that I included -->
    <p1> It is possible to get rid of this text using javascript</p1>
</div>
<script>
//this is the JavaScript code that's needed to get rid of that div
function remove_div() {
    var elem = document.getElementById('div_we_want_to_remove');
    elem.parentNode.removeChild(elem);
    return false;
}
//remove_div literally will remove the div
remove_div();

</script>

</html>

【讨论】：

是的，我尝试使用 jQuery，但由于某种原因它不符合我的目标。顺便谢谢。
嗨，Brian，你实际上不需要 jQuery。我更新了我的代码，请随时将此代码复制并粘贴到任何 html 编辑器中。此代码中的 Javascript 代码将删除围绕文本的 div，从而防止文本出现在网站上。
另外，使用 display:none 隐藏 div 不会摆脱 div，它只会隐藏它。 JavaScript 函数将完成这项工作。

【解决方案2】：

你可以在隐藏的时候在那个div上设置pointer-events: none;，它就不会再碍事了

【讨论】：

【解决方案3】：

设置visibility: hidden 然后该元素将从文档中隐藏。使其后面的按钮可点击。

.ox-messages {
    -webkit-animation: seconds 1.0s forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 5s;
    animation: seconds 1.0s forwards;
    animation-iteration-count: 1;
    animation-delay: 5s;
    position: relative;
    height: 200px;
    width: 500px;
    background: red;
    position: absolute;
    top: 0;
}

@-webkit-keyframes seconds {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

<button>TEST</button>
<div class="ox-messages"></div>

【讨论】：

不，它不会删除 div 而是隐藏。
您无法使用 CSS 删除 div。即使使用display: none，它也不会被删除。所以要么使用JavaScript 或jQuery。