固定或绝对时叠加CSS元素

Question

​

#snackbar {
      min-width: 350px; /* Set a default minimum width */
      margin-left: -125px; /* Divide value of min-width by 2 */
      background-color: #333; /* Black background color */
      color: #fff; /* White text color */
      text-align: center; /* Centered text */
      border-radius: 2px; /* Rounded borders */
      padding: 10px; /* Padding */
      position: fixed; /* Sit on top of the screen */
      z-index: 1; /* Add a z-index if needed */
      left: 85%; /* Center the snackbar */
      bottom: 85%; /* 30px from the bottom */
}

<div id="snackbar">
    Message 1
</div> 
<div id="snackbar">
    Message 2
</div> 
<div id="snackbar">
    Message 3
</div>

​

所有这些元素都堆叠成一个元素，它只显示消息3，但我希望它们堆在另一个元素的1下面。

我试图修复的方法是：

    #snackbar ~ #snackbar {
    margin-top: 10%;
    }

我想这可能会把它们堆在一起，但是没有运气。

Answer 1

首先要做的是：独具特色。

通过将它们封装在父元素中，您有了正确的想法。

​

#container{
  position: fixed;
  z-index: 1; 
  right: 3%; 
}

.snackbar {
  margin: 5px 0;
  min-width: 350px; 
  background-color: #333; 
  color: #fff; 
  text-align: center;
  border-radius: 2px;
  padding: 10px;
}

<div id="container">

  <div class="snackbar">
   Message 1
  </div>

  <div class="snackbar">
    Message 2
  </div>

  <div class="snackbar">
    Message 3
  </div>
  
</div>

​

Answer 2

我认为下面是能解决你的问题.我改变了两件事。我把你的“id”改为“class”。类通常保留用于将样式应用于多个元素，而“id”则保留给单个元素。我改变的第二件事是我删除了你指定的“职位”。希望这能有所帮助！

HTML：

<div class="snackbar">
  Message 1
</div>

<div class="snackbar">
  Message 2
</div>

<div class="snackbar">
  Message 3
</div>

CSS：

.snackbar {
  min-width: 350px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 10px; /* Padding */
  z-index: 1; /* Add a z-index if needed */
  left: 85%; /* Center the snackbar */
  bottom: 85%; /* 30px from the bottom */
}

Answer 3

我添加了一个父div并更改了css，使其使用顶部15%而不是底部85%，尝试如下：

​

#snackbar {
      min-width: 350px; /* Set a default minimum width */
      margin-left: -125px; /* Divide value of min-width by 2 */
      background-color: #333; /* Black background color */
      color: #fff; /* White text color */
      text-align: center; /* Centered text */
      border-radius: 2px; /* Rounded borders */
      padding: 10px; /* Padding */
      position: fixed;  /*Sit on top of the screen */
      z-index: 1; /* Add a z-index if needed */
      left: 85%; /* Center the snackbar */
      top: 15%;
    }

   <div id="snackbar">
       <div>Message 1
      </div>

      <div>
        Message 2
      </div>

      <div>
        Message 3
      </div>
      </div>

​