Stacking CSS elements when fixed or absolute

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>

All of these elements stack into 1 element and it will only display message 3, but I would like them to stack under 1 of another.

My attempted fix was:

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

And I thought that would maybe stack them under one another but there was no luck.

score 3 · Accepted Answer · answered Dec 20 '19 at 19:09

First things first: CSS IDs MUST be unique.

You had the right idea by wrapping them in a parent element.

#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>

@Teppy Please consider marking your question answered if you've found the solution — Libra, Dec 20 '19 at 19:14

score 0 · Answer 2 · answered Dec 20 '19 at 19:09

Here's a jsfiddle thati think solves your issue. I changed two things. I changed your use of 'id' to 'class'. Usually class is reserved for applying styles to multiple elements, while 'id' is reserved for a single element. The 2nd thing i changed was i removed your specified 'position'. Hope this helps!

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 */
}

Removing my position doesn't work as then it defeats the purpose of having position absolute or fixed and I might as well just do it normally then — Teppy, Dec 20 '19 at 19:16

hydra · Answer 3 · 2019-12-20T19:12:08.857

-1

I added a parent div and changed css to use top 15% instead of bottom 85% Try this:

#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>

edited Dec 20 '19 at 19:12

answered Dec 20 '19 at 19:10

hydra

87
5

Check out my answer, already touched on this. Plus the way you've handled it he loses his individual styling for each option. – Libra Dec 20 '19 at 19:11
really depends on what he wants to be achieved, whether he wants them individually styled or otherwise. It also addresses your comment about css ids being unique – hydra Dec 20 '19 at 19:13

Stacking CSS elements when fixed or absolute

3 Answers3