What is the reason a statically positioned element appears behind an absolutely positioned one?

I understand that absolute positioning disrupts the normal flow of elements, but I expected the display order to reflect the order in which elements are placed in the HTML code.

.absolute
{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
}

.static
{
  background-color: red;
  height: 20px;
  width: 400px;
}
<div>
  <div class="absolute"></div>
  <div class="static"></div>
</div>

I want to create a sliding menu (the '.absolute' div) that slides from bottom to top and gives the illusion of coming from behind the '.static' div. The container div will need to have 'overflow: visible'.

Is there a way to achieve this effect? Would CSS 'clip' be a better technique to use?

htmlcss

Answer №1

Referring to section 

9.9.1 Understanding the stack level: utilizing the 'z-index' property
of CSS 2.2:

Within every stacking context, the following layers are displayed from back to front:

  • the background and borders of the element creating the stacking context.
  • the child stacking contexts with negative stack levels (most negative first).
  • the in-flow, non-inline-level, non-positioned descendants.
  • the non-positioned floats.
  • the in-flow, inline-level, non-positioned descendants, such as inline tables and inline blocks.
  • the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  • the child stacking contexts with positive stack levels (least positive first).

The third item in the list corresponds to position:static and the sixth to position:absolute. I have highlighted these for your reference.

Revision, based on your updated inquiry:

To address your concern (which should have been your initial query, in my opinion), you should

  • add position:relative; to your .static div, elevating it to the same level as the position:absolute element. (Both will now be positioned).
  • If the element you want on top is not the last in the DOM, you also need to assign it a positive z-index, higher than its siblings'. Ordinarily, they are rendered from back to top.

Answer №2

Both answers provided above offer a thorough explanation for the current situation you are encountering. In dealing with the issue at hand, it is recommended to implement the following solution: simply include position:relative within the static div.

.absolute
{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
}

.static
{
  background-color: red;
  height: 20px;
  width: 400px;
  position: relative;
}
<div>
  <div class="absolute"></div>
  <div class="static"></div>
</div>

Answer №3

When an element is positioned absolutely, it can be placed anywhere on the page without affecting or being affected by other elements in the flow.

An absolutely positioned element is completely taken out of the normal flow of the document.

To achieve the desired layout, you may need to utilize properties like z-index, position: relative, and position: absolute.

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

Storing a MySQL query result in a global array in a Node.js environment

Just diving into the world of Node.js and Express, I'm trying to wrap my head around asynchronous functions and global variables. Specifically, I'm working on connecting to a MySQL database, fetching query results, and displaying them on a test.h ...

javascripthtmlmysqlnode.jsexpress

Achieving navigation bar functionality in Bootstrap using jQuery

Is there a way to make the navbar active when it is clicked? Below is the jQuery code I am currently using: $(document).ready(function () { $('.navbar li').click(function(e) { $('.navbar li').removeClass('acti ...

jqueryhtmltwitter-bootstrapnavbar

Here is a step-by-step guide on how to use JavaScript to eliminate the page title, URL, date and

When printing a page using window.print, is there a way to exclude the page title, URL, page number, and date/time from appearing? ...

javascripthtmlcss

Is my jQuery code generating a large number of DOM objects?

I am currently developing a hex dumper in JavaScript to analyze the byte data of files provided by users. To properly display a preview of the file's data, I am utilizing methods to escape HTML characters as outlined in the highest-rated answer on thi ...

javascriptjqueryhtmlperformancegarbage-collection

Leveraging image values for selecting an image from a collection and showcasing it (Javascript)

I have a collection of images that I want to enlarge upon clicking. Here is what I currently have: <div class="gallery"> <div> <img src="content/imggallery/img1.jpg" class="oldimg" value="0"> </div> ...

javascriptjqueryhtmlimage

How well do social media share buttons perform on websites

I'm experiencing issues with the performance of my gallery ever since I added social buttons. Currently, there are around 30 thumbnails in the gallery, each accompanied by four social buttons for different services like Facebook, Google Plus, Twitter ...

phphtmlperformanceshare-button

Does the onChange event fire when the value is modified by the parent element?

let [number, set_number] = useState({x: 1}); <ChildComponent number={number} onUpdate={onUpdateFunction} </ChildComponent> set_number({x: 2}) After running set_number({x: 2}), will this action prompt the execution of onUpdateFunction refere ...

javascripthtmlreactjsmaterial-ui

What is the best method to center a div on the screen?

Is there a way to have a div open in the center of the screen? ...

javascriptcss

Tips for transmitting multiple parameters using PHP via AJAX

Welcome to my page where I have a specific functionality that needs to be implemented. What I am looking for is, when the user clicks on the "accept" button, the "accept" function should be called with unique parameters attached to each row. Below is the ...

phphtmlajax

Is it possible to display multiple slideshows in separate tabs on a single page simultaneously?

I am trying to create multiple slideshows, each in a different tab on the same page. Although I am not an expert, I am attempting to figure out how to have the slideshow repeat with buttons controlling each one separately. When adding the complete script ...

htmlcssslideshow

When trying to use setInterval () after using clearInterval () within an onclick event, the functionality seems

Can anyone assist me with an issue I am encountering while using the setInterval() function and then trying to clear it with clearInterval()? The clearInterval() works fine, but the automatic functionality of li elements with a specific class suddenly stop ...

javascripthtmljqueryfunctionsetinterval

Locate a button element and dynamically assign an identifier using jQuery or JavaScript

I am currently working on a webpage that contains two forms, both enclosed within a <DL> element. <dl> <form action="" method="POST" style="display:inline-block;"> <dl><dt></dt><dd><input class="submit" typ ...

javascriptjqueryhtml

Ensuring that the CSS aligns correctly with the HTML structure is essential in order to enable the hover

I am looking to have an image appear when a mouse hovers over ONLY the "name" of the food item, and not the "price" which is part of div.child. <div class="menu-block"> <div class ="menu-titles"><span><p class="title">Brunch< ...

htmlcssimagetext

Having trouble navigating to the end of a webpage while using Python for web scraping and Spotify's web player?

I am working on a Python program that can extract a list of track names from a Spotify playlist when given the link. Here is my current progress: from bs4 import BeautifulSoup from selenium import webdriver url="https://open.spotify.com/playlist/1xXEN6Uh ...

javascriptpythonhtmlseleniumweb-scraping

Using AngularJs: Invoking Service/Provider in app.config

I need to access my service from within app.config. While searching for a solution, I came across this question, which presented a potential solution that I attempted to implement (not the accepted answer, but the one below with the title "Set up your ser ...

javascripthtmlangularjsroutes

When is the appropriate time to utilize the style attribute in CSS?

Hey there, I'm in the process of building a website from scratch and I've hit a snag. I understand that using the style tag isn't ideal, but would it be acceptable in this scenario? Is there a more efficient approach? Let's consider t ...

htmlcssstylescoding-style

Find and Scroll Dropdown Menu with Bootstrap Framework

Access the jsfiddle for more information. Have a look at these questions: In my dropdown menu, I have included a search box and multiple sub-menus. However, the search box only filters the first dropdown menu and does not work with the sub-menus. How ca ...

javascriptjqueryhtmlcsstwitter-bootstrap

Verify whether the value is in the negative range and implement CSS styling in React JS

I have been developing a ReactJS website where I utilize Axios to fetch prices from an API. After successfully implementing this feature, I am now looking for a way to visually indicate if the 24-hour change percentage is positive by showing it in green, a ...

htmlcssreactjs

Utilize generated styling data bindings when referencing assets

Currently, I am working with vue-cli 3 and trying to create background-image paths. To achieve this, I am utilizing the style data bind within a v-for-loop. Below is the component structure: <template> <ul> <li v-for="(tool, inde ...

csswebpackvue.jsassets

What are some ways to implement smooth scrolling when a navigation link is clicked?

I have a total of 3 links in my navigation bar and every time they are clicked, I want the page to smoothly scroll down to their designated section on the webpage. Although I have already set up the anchors, I lack experience in scripting to create the smo ...

javascripthtmlcssimagemodal-dialog