我如何将div放在另一个div下面？

Question

我希望能够在注册表单下面放置一个通知框，但它会一直保持在它之上。

＆＃13;

＆＃13;

h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  padding: .1em 0;
  color: #444;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
h1:before,
h1:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: #f0f0f0;
}
h1:before {
  left: -.5em;
  margin: 0 0 0 -50%;
}
h1:after {
  left: .5em;
  margin: 0 -50% 0 0;
}
h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
p {
  display: block;
  font-size: 1.35em;
  line-height: 1.5em;
  margin-bottom: 22px;
}
/** notifications **/

.notify {
  display: block;
  background: #fff;
  padding: 12px 18px;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}
.notify h1 {
  margin-bottom: 6px;
}
.successbox h1 {
  color: #678361;
}
.errorbox h1 {
  color: #6f423b;
}
.successbox h1:before,
.successbox h1:after {
  background: #cad8a9;
}
.errorbox h1:before,
.errorbox h1:after {
  background: #d6b8b7;
}
.notify .alerticon {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

＆＃13;

<div class="cd-user-modal">
  <!-- content-->
</div>
<div class="notify errorbox">
  <h1>Warning!</h1>
  <span class="alerticon"><img src="images/error.png" alt="error" /></span>
  <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我尝试更改填充和边距，但它似乎无法解决问题。

这基本上是一个当你点击它时消失的盒子，我没有在其中包含javascript代码。

玩位置（从相对位置改为绝对位置等）并没有产生解决方案..我不确定如何使用它们

谢谢！

Answer 1

对visibility:hidden;

使用visibility: visible;和div.notify.errorbox

CSS visibility Property

＆＃13;

＆＃13;

$('.show').click(function(){
  $('.errorbox').css('visibility','visible')
  })

$('.hide').click(function(){
  $('.errorbox').css('visibility','hidden')
  })

＆＃13;

h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  padding: .1em 0;
  color: #444;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
h1:before,
h1:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: #f0f0f0;
}
h1:before {
  left: -.5em;
  margin: 0 0 0 -50%;
}
h1:after {
  left: .5em;
  margin: 0 -50% 0 0;
}
h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
p {
  display: block;
  font-size: 1.35em;
  line-height: 1.5em;
  margin-bottom: 22px;
}
/** notifications **/

.notify {
  display: block;
  background: #fff;
  padding: 12px 18px;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}
.notify h1 {
  margin-bottom: 6px;
}
.successbox h1 {
  color: #678361;
}
.errorbox h1 {
  color: #6f423b;
}
.successbox h1:before,
.successbox h1:after {
  background: #cad8a9;
}
.errorbox h1:before,
.errorbox h1:after {
  background: #d6b8b7;
}
.notify .alerticon {
  display: block;
  text-align: center;
  margin-bottom: 10px;
}
.errorbox{visibility:hidden;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-user-modal">
   content here
  <button class="show">show errorbox</button>
  <button class="hide">hide errorbox</button>
</div>

<div class="notify errorbox">
  <h1>Warning!</h1>
  <span class="alerticon"><img src="images/error.png" alt="error" /></span>
  <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
</div>

＆＃13;

＆＃13;

＆＃13;