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.<\/p>\n
<\/p>\n
You may already know that \n See the Pen 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\u2019m not advocating for banner ads, but they do exist.) This pushes the navigation down and now the icon is out of place.<\/p>\n Or, let\u2019s 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.<\/p>\n If we put \n See the Pen Nice.<\/p>\n We can use this same premise if we wanted to stack two elements on top of each other. Here, we\u2019ll 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.<\/p>\n \n See the Pen This is a little old school, but I\u2019ve 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.<\/p>\n 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 check with caniuse<\/a>).<\/p>\n We can place something where we need it in the container like this:<\/p>\n \n See the Pen 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.<\/p>\n \n See the Pen position: absolute;<\/code> will place something absolutely on the page wherever you want it to be. In this case, we\u2019re 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.<\/p>\n.child {\r\n ...\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}<\/code><\/pre>\n
\n CSS Stacking, Absolute 1<\/a> by Sarah Drasner (@sdras<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nposition: relative;<\/code> on the parent element, anything inside of it with position: absolute;<\/code> will be placed absolutely, relative to that containing unit!<\/p>\n.child {\r\n \/* ... *\/\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}\r\n\r\n.parent {\r\n position: relative;\r\n}<\/code><\/pre>\n
\n CSS Stacking, Absolute 2<\/a> by Sarah Drasner (@sdras<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n<div class=\"parent\">\r\n <h2>Parent<\/h2>\r\n\r\n <div class=\"child child-1\">\r\n <h2>Child 1<\/h2>\r\n <\/div>\r\n\r\n <div class=\"child child-2\">\r\n <h2>Child 2<\/h2>\r\n <\/div>\r\n<\/div><\/code><\/pre>\n.child {\r\n position: absolute;\r\n top: 0;\r\n}\r\n\r\n.child-1 {\r\n left: 0;\r\n}\r\n\r\n.child-2 {\r\n left: 150px;\r\n}\r\n\r\n.parent {\r\n position: relative;\r\n}<\/code><\/pre>\n
\n CSS Stacking, Absolute 3<\/a> by Sarah Drasner (@sdras<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\nMethod 2: Using CSS Grid<\/h3>\n
.parent {\r\n display: grid;\r\n grid-template-columns: 250px 1fr;\r\n grid-template-rows: 150px 1fr;\r\n}\r\n\r\n.child {\r\n grid-area: 1 \/ 1 \/ 2 \/ 2;\r\n}<\/code><\/pre>\n
\n CSS Stacking, Grid 1<\/a> by Sarah Drasner (@sdras<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n.parent {\r\n display: grid;\r\n grid-template-columns: 250px 1fr;\r\n grid-template-rows: 150px 1fr;\r\n}\r\n\r\n.child {\r\n grid-area: 1 \/ 1 \/ 2 \/ 2;\r\n}\r\n\r\n.child-2 {\r\n margin-left: 200px;\r\n}<\/code><\/pre>\n
\n CSS Stacking, Grid 2<\/a> by Sarah Drasner (@sdras<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n