Divs that cover each other

I am struggling to create 2 overlapping divs in the layout shown below.

    ------------------------------------
   |                      |             |
   |   ------------------ |             |
   |  '                  '|             |
   |  '                  '|             |
   |  '                  '|             |
   |  '                  '|             |
   |  '                  '|             |
   |  '                  '|             |
   |  '                  '|             |
   |  --------------------|             |
   |  '                  '|             |
   |  '                  '|             |
   |   -------------------|             |
   |                      |             |
   |                      |             |
    ------------------------------------

I have been experimenting with it on this JSFiddle link, but haven't been successful. Can someone help me figure out what I'm doing wrong?

Edit 1: I want a left div and a right div, where the left div contains the overlapping elements. The right div should be a standard one. Just to clarify, many of you may have misunderstood and thought the right div is meant to overlap. It's actually the two inner divs within the left div that need to overlap.

Apologies for any confusion caused by my initial explanation.

csshtml

Answer №1

If you're looking for something similar to this:

html

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

css

.wrapper {
  position: relative;
}

.box1 {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 100;
  background: red;
}

.box2 {
  position: absolute;
  width: 80px;
  height: 180px;
  z-index: 110;
  left: 10px;
  top: 10px;
  background: blue;
}

Note: in your scenario, wrapper = contentContainer, box1/box2 = leftContainer/rightContainer

Answer №2

My transformation was as follows:

#rightContainer {
    /*float:right ;*/
    width:20%;
    /*margin:0px;*/
    margin-top: 50px;
    margin-left: 40px;
    padding:0px;
    position:relative;
    background-color:LimeGreen;
}

Feel free to adjust the "50px" to your preference. I have only tested this in Chrome.

Answer №3

To achieve this, manipulate the top, left, and z-index attributes.

Answer №4

I'm still a bit unclear on how to properly utilize the z-index feature.

However, I believe including this snippet in the style tag could be beneficial:

padding: 10px 20px;

The negative property seems to function as intended, but thorough testing will be necessary to determine its effectiveness.

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

Ensure that a div element expands to 100% of its parent's height when its child's height is less than 100%

I am struggling with a flex div that contains 2 elements. I want both elements to take up the full parent height while their content remains at auto height, but I keep getting the inner content height. Here is my code: <html lang="en"> <head&g ...

htmlcss

Use the .html() function to alter the content of several sets of radio buttons simultaneously by changing

Here are the different options for a product. I need help with the .change() syntax to update pricing based on the following calculations: Bundle One + Marble Color = 15$ Bundle One + Black Color = 18$ Bundle Two [Most Popular] + Marble color = 25 ...

htmljquery

Tips for maintaining a stationary background during scrolling movements

Check out the following CSS code: #bigwrapper{ background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg'); background-repeat: no-repeat; background-position: fixed; width: 100%; } Here is t ...

htmlcssbackground-image

How to Position Elements using Bootstrap and CSS

I am facing a simple issue with my webpage: I am unable to center the div-image in the header and align the content vertically. This is the current setup: https://i.sstatic.net/uFViw.png The desired position for the image is POS. I have tried methods lik ...

htmlcssbootstrap-4

Uniform line spacing

Is it possible to ensure consistent line-height between all lines by specifying it as 0.99em for both P tags and UL tags? Along with that, is it possible to maintain a space of 0.99em between P tags and UL tags, as well as between P tags themselves? To se ...

htmlcss

Ways to conceal a grid item in Material UI framework

My goal is to hide a specific grid item for a product and smoothly slide the others in its place. Currently, I am using the display:none property but it hides the item instantly. I have already filtered the products and now I want to animate the hiding of ...

javascriptcssmaterial-ui

Load a section of the webpage without using AJAX technology

I am creating a website and I would like the left menu to remain fixed while loading the content of the clicked option. Currently, each menu link uses AJAX to return the requested content. Although it works well, I would like to find an alternative to avo ...

htmljqueryajaxcss

What could be causing the CSS transition to fail when the menu button is clicked?

After clicking on the menu, a class 'active' is added to both the 'div' and 'section' elements. https://i.stack.imgur.com/jbamR.png The following javascript code accomplishes the above functionality: <script> const ...

javascripthtmlcsstransition

What steps should I follow to have my edit form component extract values from HTML in Angular?

I created a detailed listing page that includes a picture URL, title, phone number, description, and price. When the user clicks on the Edit button, it redirects them to a page with input forms for each of these fields. The form automatically populates the ...

javascripthtmlangular

Place the div absolutely on top of the Flash content

Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...

javascriptcssflashinternet-explorerxhtml

Creating a Cross-Fade Effect in easySlider 1.7 using the Jquery Plugin

Want to achieve a cross-fade effect in easySlider 1.7 Jquery Plugin? Check out this tutorial Easy Slider 1.7 for guidance. Appreciate any help, thanks! ...

jquerycssjquery-pluginseasyslider

Troubleshooting Nested Handlebars Problem

After creating a customized handlebar that checks for equality in this manner: Handlebars.registerHelper('ifEquals', (arg1, arg2, options) => { if (arg1 == arg2) { return options?.fn(this); } return options?.inverse(t ...

htmltypescripthandlebars.js

Arranging the Logo and hamburger menu for optimal visibility

I am having trouble aligning a CSS hamburger menu next to my logo. I have placed both the CSS hamburger and the logo in the header. Although I was able to float the logo to the right, it is not on the same line as the menu. After the header, I would like ...

htmlcss

What should I name my Bootstrap Modal ID to ensure AdBlock Plus blocks it?

What specific ID should I use to block my Bootstrap Modal with AdBlock Plus? I want AdBlock Plus to block it for users who have it installed and are using it. I don't want to be overly intrusive by trying to circumvent ABP. The only reason I am using ...

jqueryhtmlcsstwitter-bootstrapadblock

Blazor: Passing a CSS class as a parameter to a child component

Is there a way to ensure css isolation works properly when passing a class as an argument to a child component? In the following code snippet, I anticipated the child component would display in blue, but that's not happening. Parent.razor <div cla ...

cssblazor-webassembly

Is it possible to retrieve all PHP classes that share a common word in their names?

Is there a way in PHP to match all classes with the same word? For example: <div class="classeby_class"> <div class="classos-nope"> <div class="row"> <div class="class-show"></d ...

phphtmlxmlxpathxml-parsing

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

javascriptjqueryhtmlinnerhtml

On what occasion is a DOM element considered "prepared"?

Here's a question that might make you think twice: $(document).ready(function() { }); Sometimes, the simplest questions lead to interesting discussions. Imagine having a list of elements like this: <body> <p>Paragraph</p> < ...

javascriptjqueryhtml

Searching for various values in PHP with user input

I am currently working on implementing a basic search tool that allows users to search the database by providing certain inputs. The form consists of 3 input fields: However, when I attempt to search one by one, only the first field functions correctly w ...

phphtmlmysql

Tips for arranging a menu horizontally with buttons in CSS

I am currently working with a dropdown menu that I coded using CSS, similar to the one shown at . My issue is that I have 4 menu items and I want the total width of the parent div to be divided equally among each item, regardless of the resolution. Curre ...

cssmenualignment