How to make overlapping div?

Something very popular in web design currently is overlapping images. When the design is handed to you, as the developer to implement it, there are few ways to go about it like most things with CSS.

Creating two, overlapping DIVs can be frustrating. Typically, you’ll want to set your bottom layer’s CSS rule to position: relative and the top layer with position: absolute.

One way you might approach it is you could absolutely position one element with a lower z-index to make the other image sit on top, adjust the widths on each image, so you can see both of them.

Well, once you need text on any other content after the images, you’ll run into a problem. If the absolute-positioned element is taller than the static (top) image, the following content will overlap the images. This is due to the height of the absolute-positioned image which is not recognized since it’s out of the document flow, ( a normal behavior for an absolute positioned element). To get around this, you might begin to try out arbitrary heights on this images and the component then becomes very fragile, limited, and hacky real fast.

In our example above, we created a react component to hold all the content, making it easier to handle all DIVs. I have a series of DIVs, each contains some text and a image.

In our CSS, our image and the image-container div can be easily stacked together by setting the width.

Basically, nothing changes on screen. By default, a div block has the height of its content. Nonetheless, we can set the height and width from CSS. We can also define a background color to make it easier to understand what happens.

By default, in the Normal Document Flow DIVs are block elements and are displayed one below the other.

Our objective is to display the dialog div over the parent div. There is no way to do this in the Normal Document Flow where block elements are always displayed one below the other. The need to take out the dialog div from the Normal Document Flow.

We can do this by setting its position to absolute. Once we do that the dialog div is not considered to be part of the Normal Document Flow. It will be displayed over the existing div elements.