Make item on top of other item without overlapping text năm 2024

• Help Videos Watch our tutorials and feature updates
• Extensions Third-Party Extensions for YOOtheme Pro
• Experts Hire an independent YOOtheme expert
• Hosting Recommended WordPress and Joomla hosting

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.

<div class="parent">  
  <h2>Parent</h2>
  <div class="child child-1">  
    <h2>Child 1</h2>  
  </div>
  <div class="child child-2">  
    <h2>Child 2</h2>  
  </div>  
</div>

.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 you prevent overlapping?

Overlapping comes when the display option is set to fixed or absolute in css. Make the divs display to block and height to auto. Hi, All that is needed to fix this is “min-height” and “min-width” in your CSS.

How do I stop text overlapping in CSS?

Solution to overlapping text We can easily fix this by changing our white-space to normal .

How do you not overlap elements in CSS?

Suppose you have a div floating element that is floating and overlapping another non-floating element; if you do not want that overlapping, you can use the CSS clear property. This property moves down the non-floating element to avoid overlapping.

How do I put an element on top of another 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.