Css stack images on top of each other năm 2024

In many situations you may want to position one image on top of another image. There are many ways to achieve this using HTML and CSS. You can find here some easiest methods from this lesson.

The following HTML-CSS code placing one image on top of another by create a relative div that is placed in the flow of the page. Then place the background image first as relative so that the div knows how big it should be. Next is to place the overlay image as absolutes relative to the upper left of the first image.

HTML-CSS Source Code

position: relative - In relative position method , you can position the element relative to its normal position. In this case you should use left or right and top or bottom to move the element relative to its container.

position: absolute - When we position an element as Absolute , that element is is completely removed from the document`s normal flow. In Absolute position, the position is set through some combination of left, right, top and bottom properties.

More about.... CSS Position

Next approach is using z-index to put an image on top of another image.

HTML-CSS Source Code

z-index

While overlapping CSS elements, when using absolute and relative position, the default behavior is to have the first elements underneath later ones. In these cases we can control layering of positioned elements by using the z-index property . When using the z-index property you can specify which of the boxes appears on top the other one.

Note: Flexbox is not supported in Internet Explorer 10 and earlier versions. It is up to you if you want to use floats or flex to create a three-column layout. However, if you need support for IE10 and down, you should use float.

Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Add Responsiveness

Optionally, you could add media queries to make the images stack on top of each other instead of floating next to each other, on a specific screen width.

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

If you want to create fantastic and unique visual experiences on the web, you will eventually need two elements to overlap or exist in the same place. You may even just need them to be positioned near or next to each other. Let’s go over two different ways to accomplish this, one with the position property and one with CSS Grid.

Method 1: Using the Position Property

You may already know that position: absolute; will place something absolutely on the page wherever you want it to be. In this case, we’re absolutely positioning the child to the top-left of the page. No matter where the parent is, the child will be placed in that corner, absolutely.

.child {  
  ...  
  position: absolute;  
  top: 0;  
  left: 0;  
}

See the Pen CSS Stacking, Absolute 1 by Sarah Drasner (@sdras) on CodePen.

But this is very brittle! What if you were to place something on the page and then something else comes along after it? Maybe you have an icon within a navigation that you always want in the top-left corner, but a third party comes in and puts in a banner ad. (I’m not advocating for banner ads, but they do exist.) This pushes the navigation down and now the icon is out of place.

Or, let’s say you want to make a self-contained component that you can use in multiple places. You need it to be reusable and work within its own context, no matter where you use it.

If we put position: relative; on the parent element, anything inside of it with position: absolute; will be placed absolutely, relative to that containing unit!

.child {  
  /* ... */  
  position: absolute;  
  top: 0;  
  left: 0;  
}
.parent {  
  position: relative;  
}

See the Pen CSS Stacking, Absolute 2 by Sarah Drasner (@sdras) on CodePen.

Nice.

We can use this same premise if we wanted to stack two elements on top of each other. Here, we’ll have two child elements stacked on top of one another and set apart by 150 pixels. We’ll see that they’re now contained in that same parent and stay positioned inside it.

  
  
Parent
  
  
    
Child 1
  
  
  
  
    
Child 2
  
  
  

.child {  
  position: absolute;  
  top: 0;  
}
.child-1 {  
  left: 0;  
}
.child-2 {  
  left: 150px;  
}
.parent {  
  position: relative;  
}

See the Pen CSS Stacking, Absolute 3 by Sarah Drasner (@sdras) on CodePen.

This is a little old school, but I’ve been using it for years and I still reach for it. It works consistently across browsers and can help you achieve even the strangest and unique placements.

Method 2: Using CSS Grid

Another nice way of overlapping elements, stacking them, or modifying their placement is CSS Grid, depending on how far back you need to support (which you can ).

We can place something where we need it in the container like this:

.parent {  
  display: grid;  
  grid-template-columns: 250px 1fr;  
  grid-template-rows: 150px 1fr;  
}
.child {  
  grid-area: 1 / 1 / 2 / 2;  
}

See the Pen CSS Stacking, Grid 1 by Sarah Drasner (@sdras) on CodePen.

And if one element should stack on the other, we can put them in the exact same grid area. Let’s also offset them slightly by using a margin.

.parent {  
  display: grid;  
  grid-template-columns: 250px 1fr;  
  grid-template-rows: 150px 1fr;  
}
.child {  
  grid-area: 1 / 1 / 2 / 2;  
}
.child-2 {  
  margin-left: 200px;  
}

See the Pen CSS Stacking, Grid 2 by Sarah Drasner (@sdras) on CodePen.

If you find this technique difficult to visualize, I’ve created a CSS Grid Generator that hopefully helps see things more clearly.

There are so many places to use these techniques! You can stack, layer and offset elements. You can make navigations, footers. You can create just about any type of layout where you want to have more fine-grain control of how elements are placed on a page.

How do I overlay images on top of each other in CSS?

You would do this by putting both images in a container element that is relatively positioned. Then you can add the position absolute rule to both pictures and position image 2 as you need, using the top, bottom, left, right syntax as needed.

Can you overlap images in CSS?

You can add more images using different overlapped column positions with the grid-column CSS property. This technique also works with any HTML element, not just images.

How do you add an image overlay in CSS?

In short, CSS overlay effects are achieved by using the following:.

background-image and background CSS properties to add image and linear-gradient overlay effect..

position:absolute , top , bottom , right , left CSS properties to control the position of overlay image or text..

How do you display elements on top of each other in CSS?

In CSS, relative positioning can be used to move elements on top of each other. To do this, use the position: relative and z-index rules to specify the relative positions.