Different options exist for top layers with flexible widths aside from using position: absolute

The only method I'm aware of to place a layer on top is by using position: absolute.

https://i.sstatic.net/R4j8i.jpg

(favoring top, disliking bottom)

However, this approach often prevents dynamic scaling with the rest of the page.

You can attempt some width adjustments like width: calc(62% - 60px);, or develop a script for size calculation.

Yet, is there truly no way to overlay a layer and still have it scale along with the page?

Answer №1

You can achieve this by using the CSS property position:relative;. Elements with relative positioning will take up the width of their parent and can be brought to the top using z-index. It's important to note that z-index only applies to elements that are positioned in some way.

Here is an example code snippet:

.menuParent{
height:34px;border:1px solid black;
}
.menu{
width:100%;position:relative;border:1px solid red;top:34px;z-index:1;background: white;
}
<div style="width:120px;"  class="menuParent">
  <div class="menu">
    <div>AirBnb</div>
    <div>Booking.com</div>
    <div>Expedia
      <div>Agents</div>
    </div>ThaiHome</div>
</div>
<div> Other div below the menu list</div><br/><br/><br/><br/><br/>
<div style="width:240px;"class="menuParent">
  <div class="menu">
   <div>AirBnb</div>
    <div>Booking.com</div>
    <div>Expedia
      <div>Agents</div>
    </div>ThaiHome</div>
    </div>
    <div> Other div below the menu list width bigger width</div>

Answer №2

ancestor{
position: relative;
}

offspring {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

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

Different option to employ instead of utilizing the <br> tag on multiple lines

Struggling with the tedious task of copying and pasting code snippets on my websites. Is there a simpler way to achieve this? I am looking for an option to easily insert <br> at the end of each line. Currently, I am manually adding <br> at th ...

jQuery - delete a single word that is case-sensitive

Is there a way to eliminate a specific case-sensitive word from a fully loaded webpage? The word in question is "Posts" and it appears within a div called #pd_top_rated_holder that is generated by Javascript. The Javascript code is sourced externally, so ...

Unleash the power of CSS3 to style this button

I received an image of a button that I need to replicate on a website, but unfortunately, only the image was provided without any information about the font-family or size. Despite not being a designer or CSS expert, I attempted to create a CSS style that ...

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

Styling the navigation menu for mobile devices

How can we transition from a menu like this : https://i.sstatic.net/qQ2k1.png to this when the screen size reaches a specific width: https://i.sstatic.net/AUM4v.png In essence, replacing certain texts with icons. Is pre-defining it and changing the dis ...

javascript with python

Currently, I'm in the process of parsing a html page. I've experimented with spynner, selenium, and mechanize, however none of them have been effective when dealing with JavaScript in this particular scenario. Is there anyone who can provide som ...

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

Issue: Firefox is not registering the first click event when a textarea has the following CSS: textarea:focus { resize: vertical; } Check out the demo: http://jsbin.com/wuxomaneba/edit?html,css,output The fix for this problem is straightforward - ju ...

Create an input box with a designated class

When I click the button in my HTML and JavaScript code below, I am able to dynamically add a text field and radio button. This functionality is working properly. However, I also want the newly generated text field to have the same font size and appearance ...

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

JavaScript file to run with npm start: import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import Routes from './routes'; ReactDOM.render( <R ...

Accessing a text document from a specific folder

As a novice in the world of HTML and PHP, I am attempting to develop a script that can access a directory, display all text files within it, allow for editing each file, and save any changes made (all operations will be managed through an HTML form). Howev ...

Non Rectangular Header with Bootstrap's Responsive Navbar

Currently, I'm in the process of developing a website and I've been pondering if it's feasible to design a bootstrap navbar with a uniquely shaped header as a background. I envision the header to resemble something like this: https://i.sst ...

Divs that overlap and share the same font may exhibit variations in letter spacing

In my design, I have a div that overlays another div with the exact same offsets and font properties. The upper div has a transparent background and typically covers the text of the underlying div. However, I recently noticed an issue with my script where ...

Show full-screen images on click using Ionic framework

Currently, I am working on developing a mobile app using the Ionic framework. I have created a layout that resembles the one shown in this Card Layout. My question is: How can I make the card image display in full screen when clicked by the user and retur ...

How can I make an image disappear after animation with CSS?

I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...

transferring a PHP object between two PHP files containing HTML code

profiles_information.php I am working with a PHP document that receives information from Ajax and sets it as attributes to an object of the Profile class. I have created HTML to display a table, where users can click on "Add" to send the object to add_to_ ...

Can you help me adjust the height of my banner and center its content vertically?

Looking to create a custom banner for my website, specifically at the top with dimensions of 700px width and 80px height. The code snippet is as follows: <div class="container-narrow" style="heigth: 80px;"> <img src="#" width="52" ...

What is the process for accessing an image via localhost on the same computer?

I created a program that saves images locally and stores their URLs in a database. When retrieving this data via ajax, the URLs are fetched and appended to a div class using the following code: $( document ).ready(function() { $.ajax({ url: "/ ...

The state of XMLHttpRequest always remains in a perpetual state of progress, never

I have come across an MVC Core application. One of the methods in this application currently has the following structure: public IActionResult Call(string call) { Response.ContentType = "text/plain"; return Ok(call); } In addi ...

What is the method for obtaining the value of the second option in a select input field?

My form contains three select inputs : ... <tr> <td><b><?php echo _getText("service.OD.tbr_title.vollondona");?></b></td> <td> <select id="vollondona" name="vollondona" oncha ...

Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

Within my mat-menu, there is a div for each mat-menu item. The number of items varies depending on the data retrieved. However, I noticed that when there are more items than can fit in the menu, it extends beyond the boundaries of the mat-menu instead of ...