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

Why am I seeing a blank page?

I've recently started learning React and I'm facing an issue where the header and paragraph are not showing up on my page. Here's a snippet from my script tag with the type set to text/babel: var myElements = React.createClass({ render: ...

javascriptreactjs

Utilizing Express JS to Optimize JPEG File Loading with Cache Headers

I have been working on implementing Cache-Control for my static image files. I have successfully set this header for HTML and JS files: https://i.stack.imgur.com/9VuWl.png However, I am facing challenges with JPEG files: https://i.stack.imgur.com/p52jm. ...

javascriptnode.jstypescriptexpresscaching

React: Submit button not triggering form submission despite having a valid submit event handler and correct syntax

My question stands out from existing ones as it features valid syntax, correct use of type="submit" on the button, and a simple onSubmit handler on the form. Despite this, clicking the button fails to trigger the onSubmit handler. To illustrate ...

javascripthtmlreactjsforms

Saving base64 encoded pdf on Safari

I am facing an issue with a POST call that returns a base64 PDF. The problem arises when trying to convert it to a Blob and download it using Safari browser. This method works perfectly in all other browsers. openPdf = () => { const sendObj = { ...

javascriptpdfsafari

Issue with .submit() not submitting form after setTimeout timer runs out

How can I add a delay after a user clicks submit on a form before it actually submits? I have an image that appears when the click event is triggered, but the form never actually submits... This is the HTML form in question: <form class='loginFor ...

javascriptjqueryhtml

Managing the clearance of an absolutely positioned div with CSS

I'm encountering an issue where my page contains divs that are 250px x 250px and positioned absolutely. When one of these divs is opened, an ajax call expands the div to display all its contents. These divs have a maximum width of 600px but can vary i ...

htmlcss

The basic Node.js API for greeting the world encountered a connection failure

I'm currently working on setting up a basic hello world route using nodejs and express. After running node index.js, I see listening on port 3000 in the console, but when I attempt to access http://localhost:3000/helloworld, it just keeps trying to co ...

javascriptnode.jsexpress

Utilizing Array Elements to Populate the Title Attribute in <TD> Tags

I am trying to display text on hover of a cell in my dynamically created HTML table, using the title attribute. However, instead of reading the contents of the array, it is displaying the array name as a string. Below is the code for generating the table ...

javascriptdhtml

How to center an image within a div without it moving

I have set up a JSFiddle for reference: http://jsfiddle.net/AsHW6/ My task involves centering the down_arrow.png images within their respective div containers. I have successfully centered the up_arrow.png images using auto margins. These images are posit ...

csshtmlcss-positionalignment

Position the div in the center, but for smaller sizes, switch to aligning

My current layout setup is as follows: Left side bar with a width of 200px and positioned at left: 0; Center section with a width of 700px and positioned at left: 250px; Right side bar with a width of 200px and positioned at right: 10px; While this arra ...

css

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

csscheckbox

A guide on changing a plus sign into a minus sign with CSS transition

Is there a way to create a toggle button that changes from a plus sign to a minus sign using only CSS, without the need for pseudo-elements? The desired effect is to have the vertical line in the "+" sign shrink into the horizontal line. While I know it& ...

javascripthtmljquerycsscss-transitions

Mysterious CSS "manifestation" perplexes Chrome while evading Firefox's gaze

There seems to be an issue with the jQuery plugin on this demo page: If you access it using Firefox, you'll notice that the social sharing buttons are visible and functioning properly. However, in Chrome, there appears to be a peculiar CSS computatio ...

jquerycss

How can I design a search box similar to the one on the android.com website?

Is it possible to replicate the search box effect on the Android website, where the menu items fade out and the search box expands upon clicking the search icon?view image here See the difference before and after clicking the search icon ...

jqueryhtmlcss

add text nodes with unnecessary quotation marks around my selection list

Looking to incorporate a select list into my website using a button. I must utilize nodes for access within the DOM to retrieve its value later, so innerHTML isn't an option. Experiencing difficulty as createTextNode seems to encase my list in quota ...

javascripthtmlajaxweb-applications

Implementing Laravel's functionality for calculating average ratings with the help of jQuery

In my database, I have two tables named Users and ratings. The Users can give ratings to consultants, and the Ratings table structure is as follows: User_id | consultant_id | rating --------------------------------- 1 1 2 ...

javascriptphpjquerylaravel-5laravel-5.4

Inserting a variable into a JSON string

Within my code, I have a basic variable containing strings that are converted into a JSON object. My goal is to create an input field where a person's name can be entered and added to the text. The current setup looks like this var text = '{"st ...

javascriptjson

What is the best way to design an element that exceeds the size of my physical body

I am currently working on creating a table that needs to be larger than the body and centered. Let me provide some more information. Below is my simplified HTML code : <body> <div id="one"> <div> <tab ...

htmlcss

Guide to setting up a backend system using AJAX, PHP, and MySQL to handle dynamic video sources in conjunction with Google TV Templates

If you're looking to develop web apps for Google TV, particularly those involving video content, the simplest method is to utilize Google TV Templates: https://developers.google.com/tv/web/docs/gtv-templates. The original Google TV Templates included ...

phpjavascriptajaxgoogle-tv

Why is the validate function not being executed in the Backbone Model?

I am a beginner in learning Backbone and I am attempting to implement simple validation in my Person Model. However, I am facing an issue where the validate method does not run when I set a new age. Can someone guide me on where I might be making a mistake ...

javascriptjquerybackbone.js