Placing an absolutely positioned element on top of other elements

Currently, I am working on a frontendmentor website and encountering difficulty in positioning the shopping cart div above all the other elements. Initially, I attempted to use z-index for this purpose, but it seems that it does not work with elements having a position style. My approach involved setting position: relative on the parent element and position: absolute on the child so that the shopping cart icon always remains on top. Is there an alternative method to bring an element to the forefront, or should I reconsider how I position the div?

.right-container {
  padding: 1rem;
}

.account-container {
  display: flex;
  align-items: center;
  position: relative;
}

.cart-icon-container {
  margin-right: 2rem;
}

.cart-icon-container img {
  height: 30px;
  width: 30px;
  aspect-ratio: 1;
}

.shopping-cart-overlay {
  position: absolute;
  top: 5rem;
  right: 100px;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0 1rem 10px rgba(0, 0, 0, 0.185);
}

.shopping-cart-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
}
<div class="right-container">
  <div class="account-container">
    <div class="shopping-cart-overlay">
      <div class="shopping-cart-header">
        <h4>Cart</h4>
      </div>
      <div class="shopping-cart-content">
        <p>Your cart is empty</p>
      </div>
    </div>
    <a href="/index.html" class="cart-icon-container">
      <img src="./images/icon-cart.svg" alt="cart">
    </a>
    <img class="avatar" src="./images/image-avatar.png" alt="profile-pic">
  </div>
</div>

javascripthtmlcss

Answer №1

Indeed, it does have an impact. For a more comprehensive understanding of how z-index interacts with position, I recommend reading through this article. The reason you may not have noticed the effect is because the div was transparent.

Take a look at the example below. While it mirrors your code, I adjusted the background and positioned the .shopping-cart-overlay element nearer to the other elements, illustrating its functionality.

.right-container {
  padding: 1rem;
}

.account-container {
  display: flex;
  align-items: center;
  position: relative;
}

.cart-icon-container {
  margin-right: 2rem;
}

.cart-icon-container img {
  height: 30px;
  width: 30px;
  aspect-ratio: 1;
}

.shopping-cart-overlay {
  position: absolute;
  //top: 5rem;
  //right: 100px;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0 1rem 10px rgba(0, 0, 0, 0.185);
  
  /* Changes */
  top: 0;
  left: 125px;
  z-index: 99;
  background-color: red;
}

.shopping-cart-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
}
<div class="right-container">
    <div class="account-container">
      <div class="shopping-cart-overlay">
        <div class="shopping-cart-header">
          <h4>Cart</h4>
        </div>
        <div class="shopping-cart-content">
          <p>Your cart is empty</p>
        </div>
      </div>
      <a href="/index.html" class="cart-icon-container">
        <img src="./images/icon-cart.svg" alt="cart">
      </a>
      <img class="avatar" src="./images/image-avatar.png" alt="profile-pic">
    </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

D3 - Error: Unable to access property 'text' of an undefined method

I want to create a visual representation of significant events that have occurred in the United States over the past 30 years. Below is a snippet of code I am using for this project: var mevent = svg.append("text") .attr("class", "year event") .at ...

javascriptd3.js

What is the process for sending a file to the server using JavaScript?

It seems like the process is not as simple as I originally thought. Here is the breakdown of what I am trying to achieve: I am capturing the FileList in my state like this... const [formValues, setFormValues] = useState({ image: null }) <input typ ...

javascriptnode.jsreactjsaxiosupload

What is the best way to reach the assets/public directory from a routed page in Meteor?

I am currently developing a multipage application using Meteor and am facing an issue accessing public assets from a routed page. For instance, when I go to the route http://localhost:3000/editor, I would like to be able to utilize an image from public/im ...

htmlmeteoriron-router

Is Selenium suitable for testing single page JavaScript applications?

As a newcomer to UI testing, I'm wondering if Selenium is capable of handling UI testing for single-page JavaScript applications. These apps involve async AJAX/Web Socket requests and have already been tested on the service end points, but now I need ...

javascripttestingselenium

How to manipulate local JSON files using AngularJS

I recently started learning angularjs and have been spending hours online trying to figure out how to access data from a local json file without the need for hosting it on localhost. Unfortunately, I haven't come across any solutions yet. I attempted ...

javascriptjsonangularjs

Positioning the subheading "perfectly beneath the main heading" for a clean and professional look

I'm feeling a bit lost when it comes to tasks like this. While I can easily design an entire website using html and css, I start to question my approach when faced with challenges like these. Could someone offer some guidance? My goal is to have a H1 ...

htmlcsslayout

Any recommendations besides suggesting "g"? Let's brainstorm some other ideas for g!

Looking for some assistance with a mixin I wrote that seems to be causing a loop. Any suggestions on how to optimize the code or alternative methods to achieve the desired outcome? <div class='mh-60 pt-10'>dfgdfgsdfgsdf</div> ...

cssloopssass

Combine the content from multiple text areas and submit it to another text area

****UPDATE**** Thanks to @JasonB, I was able to resolve the previous issue mentioned. Now, I have three additional textareas on the same form that should only appear when their respective checkboxes are clicked. How can I integrate this into my current sc ...

javascriptjqueryhtmlcss

Tips for sending a localstorage value as a parameter in an axios request

Currently, in my React app, I am using Express to handle all of my database queries. One thing I am attempting to achieve is passing the user id stored in local storage into a post request. This is necessary for my application since it revolves around use ...

javascriptnode.jsreactjsexpress

The age calculator is failing to display the accurate age calculation

This code is designed to compute the age based on the selected value in the combo box, and display the result in the text box below. The age should update every time the user changes the selected value in the combo box. However, the computed age is not cur ...

phpjavascripthtml

Retrieve container for storing documents in JavaServer Pages

Previously, I created JSP and HTML code to upload a file from the hard disk into a database using <input type="file" name="upfile"> However, a dialog box with an "Open" button is displayed. What I am looking for is a "Save" button that will allow u ...

javajavascripthtmljsp

Using NodeJs to Render HTML Templates and Implement Logic on the Server Side

Hello, I am currently working on developing a widget module for my Angular 1 based UI project. This widget is meant to display real-time information. My design involves sending an HTML view to the client from the Node server (potentially using Express.js) ...

javascriptangularjsnode.jsexpressserver-side-rendering

Tips on creating a button that, upon clicking, triggers the download of an Excel file using PHPSpreadsheet

I am trying to figure out how to create a button that, when clicked, will download an Excel file named b1b5.xls with some specified values added. Here is the code I have so far: <html> <head> </head> <body> <center> < ...

javascriptphphtml

Variables for NPM Configuration

After researching the best way to securely store sensitive information, I decided to utilize the config package and environment variables for added security. Here is how I implemented this setup: Created a config directory containing two files: default.js ...

javascriptnode.jsnpmconfig

Inheriting vertical height and alignment (inline-block)

I struggle to understand how these things work and I would greatly appreciate it if someone could provide an explanation. 1 http://d.pr/i/6TgE+ why http://d.pr/i/UAZn+ *it's actually 9. Here is the code snippet: <header> <div class=" ...

htmlcss

Ways to detect and respond to events in this particular scenario

I'm creating necessary components dynamically based on the provided CSS. This process involves iterating through a response array and generating HTML elements accordingly. for (var i = 0; i < responseinner.length; i++) { for (var k = 0; k < ...

javascriptjquery

Creating equal-sized borders for symbols of varying sizes: a step-by-step guide

Utilizing Font Awesome icons along with their fa-border style: <i class="fa fa-twitter fa-5x fa-border icon-blue"></i> <i class="fa fa-question fa-5x fa-border icon-grey"></i> The border size created varies based on the symbol siz ...

cssfont-awesomefont-awesome-4

Updating variable values in AngularJS while navigating through routes

How can I dynamically set the flag icon inside the page header based on the selected language using AngularJS? The language selection is done in a separate .htm file and all managed by AngularJS routing. My application has a single controller called "appCo ...

javascripthtmlangularjsroutes

Tips for concealing the browser's scroll bar on a designated webpage

Is there a way to hide the browser scrollbar on just one page of a website without affecting other pages? I have only been able to hide the scrollbar using body::-webkit-scrollbar { display: none; } However, this code hides the scrollbar for the enti ...

htmlcssvue.js

Is there a way for me to determine the quality of a video and learn how to adjust it?

(function(){ var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd"; var player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector("#videoPlayer"), url, })(); var bitrates = player.getBitrateInfoListFor("vid ...

javascripthtmlmpeg-dashdash.js