Arranging CSS elements in a stacked manner with fixed or absolute positioning

#snackbar {
      min-width: 350px; /* Default minimum width */
      margin-left: -125px; /* Center value of min-width */
      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; /* Positioned on top of screen */
      z-index: 1; /* Z-index option */
      left: 85%; /* Snackbar centered */
      bottom: 85%; /* Positioned 30px from the bottom */
}
<div id="snackbar">
    Message 1
</div> 
<div id="snackbar">
    Message 2
</div> 
<div id="snackbar">
    Message 3
</div>

These elements combine into a single element where only message 3 is displayed, but I want them to stack on top of each other.

I tried to fix it with:

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

However, this attempt did not successfully stack them under each other as intended.

htmlcss

Answer №1

It is crucial to remember that CSS IDs must be unique.

Your approach of enclosing them in a parent element was spot on.

#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

Check out this helpful jsfiddle solution I created for you. I made a couple of adjustments to your code. Firstly, I replaced 'id' with 'class' as 'class' is typically used for styling multiple elements, while 'id' is meant for individual elements. Secondly, I removed the specified 'position'. Hopefully, these changes will resolve your issue!

Here's the modified HTML:

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

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

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

And here's the adjusted CSS:

.snackbar {
  min-width: 350px; /* Minimum width set */
  margin-left: -125px; /* Min-width value divided by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Text centered */
  border-radius: 2px; /* Rounded borders */
  padding: 10px; /* Padding */
  z-index: 1; /* Z-index included if needed */
  left: 85%; /* Snackbar centered horizontally */
  bottom: 85%; /* 30px from the bottom */
}

Answer №3

For a different approach, I introduced a parent div and modified the CSS to utilize the top 15% instead of bottom 85%. Give it a try: 

#snackbar {
      min-width: 350px; /* Establish a default minimum width */
      margin-left: -125px; /* Offset value of min-width by half */
      background-color: #333; /* Dark background color */
      color: #fff; /* Light text color */
      text-align: center; /* Centered text */
      border-radius: 2px; /* Rounded corners */
      padding: 10px; /* Spacing around content */
      position: fixed;  /*Positioned at the top of the screen */
      z-index: 1; /* Assign a z-index if required */
      left: 85%; /* Align the snackbar in the center horizontally */
      top: 15%; /* Position the snackbar 15% from the top */
    }

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

      <div>
        Message 2
      </div>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning an element perfectly at the top within a column

I have two columns side by side. The column on the left contains HTML that I cannot control. On the right side, I need to display a comment box that should align with the text clicked on the left hand side. Is it possible to position an element absolutely ...

javascripthtmlcss

Tips for preserving additional information in a form by selecting "add more" option

Recently, I encountered a challenge with a form on my website. Whenever a user fills out a few fields and clicks "Add", the data transitions into an HTML element. Subsequently, the form partially clears for more data input. Now I'm faced with the dil ...

javascriptjqueryhtmlformsserialization

Fixing the alignment of the left column table in Bootstrap 3.3.7

Is there a way to fix the left table column (date and all column names) in Bootstrap 3.3.7? I attempted to use position: fixed; but it didn't work as expected. Any suggestions on what I should do next? Check out this fiddle for reference <scr ...

jqueryhtmlcsstwitter-bootstrap

images not loading correctly in unique WordPress theme design

I am currently working on developing a unique custom WordPress theme. Within my Theme folder, I have the following files and folders: header.php index.php footer.php style.css /images picture-1.jpg One issue I am encountering is that I am unable to prop ...

phphtmlcssimagewordpress

I am attempting to properly arrange my navigation links and logo in alignment

I need help aligning the logo in the exact center while keeping the navigation links as they are. Here is how it currently looks: https://i.stack.imgur.com/qOgVJ.jpg My CSS: .logo { display: inline-block; text-align: center; } na ...

htmlcss

submission not being processed on form

I've spent the last 3 hours searching for this elusive error, but to no avail. It seems that the onsubmit function is not triggering for some unknown reason. My goal is to ensure that the user inputs a non-negative number in each field. <!DOCTYP ...

javascripthtmlonsubmit

What is the best way to style the current element being targeted in React?

In my React application, I am trying to dynamically adjust the height of a textarea element based on its content. I want to achieve this by utilizing an 'onchange' listener to trigger a resize function. While I have successfully implemented the ...

javascriptcssreactjsajax

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss

Having trouble with autoescaping not working properly on your Django test project display?

Seeking ways to enhance project performance: Code snippet from myworld/members/view.py: def testing(request): template = loader.get_template('template.html') context = { 'heading': 'Hello &lt;i&gt;my&lt;/i&gt; ...

pythonhtmldjangodjango-viewsdjango-templates

Combining cells through the utilization of JavaScript

I've searched for ways to merge cells in a table using JavaScript but haven't been able to find any code that works. Is there a specific approach I can follow to implement cell merging like in MS-WORD tables? Your advice would be greatly apprec ...

javascripthtmlmerge

When using $.ajax, special characters are not rendered properly, displaying strange symbols instead of accents such as "é" or "ã"

I'm struggling to display the letter "é" using $.ajax and a JSON file. I've tried setting everything up with <meta charset="utf-8"> but all I get is an alert window showing "". Any help is appreciated, just not looking for PHP solutions. H ...

javascriptjqueryhtmljson

Searching for mobile WiFi preferences through a web browserHere are the steps to

Is there a method to access mobile connectivity settings through a website? I am interested in determining the connection type (3G\4G\WiFi) and if it is WiFi, identifying the security method being used. Is this achievable? If so, how? Edit: If ...

javascripthtmlmobile-safarimobile-website

What is the best way to incorporate padding into an Angular mat tooltip?

I've been attempting to enhance the appearance of the tooltip dialog window by adding padding. While adjusting the width and background color was successful, I'm encountering difficulties when it comes to styling the padding: https://i.sstatic.ne ...

javascripthtmlcssangularangular-material

Encountering an "unexpected token" error while utilizing the JSOP API in a ReactJS application

I am facing an issue while fetching data from a JSON API, as it is throwing an "Unexpected token" error. Below is the code that I have tried so far. Any help in resolving this problem would be greatly appreciated. Below is the code snippet: var Demo = Re ...

javascripthtmljsonreactjs

How to turn off a sticky header on Mobile using CSS

Below is the code I am using to create a fixed header on my website. <?php } ?> <header id="header" class="<?php if ( theme_option( THEME_OPTIONS, 'enable_header_fixed' ) == 'true' ) : ?> fixed_header <?php else : ?&g ...

phpcss

Having trouble with jQuery on my webpage

Looking for assistance with a technical issue I'm facing... I am currently working with AngularJS and have integrated jQuery into my project. However, I've encountered an issue where the jQuery code is not functioning as expected on the HTML pag ...

javascriptjqueryhtmlangularjs

Evolving fashion trends

I'm looking to dynamically change the style of my HTML element based on screen size, similar to this example: <p [ngStyle]="{'color': isMobile() ? 'red' : 'blue'}">Lorem Ipsum</p> The code above triggers a m ...

htmlcssangulartypescript

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for centering a DIV with nearly 100% width and full height

<div class="main"></div> <style> .main{ background-color:black; position:absolute; width:calc(100% - 40px); height:calc(100% - 40px); margin:20px; </style> H ...

htmlcss

Utilize JavaScript to redirect based on URL parameters with the presence of the "@ symbol"

I need help redirecting to a new page upon button click using a JS function. The URL needs to include an email address parameter. <form> <input type="email" id="mail" placeholder="ENTER YOUR EMAIL ADDRESS" requir ...

javascripthtml