html - How can I make a child element escape a parent with overflow: hidden without breaking my layout? - Stack Overflow

admin管理员组

文章数量:1404927

I’m working on a layout where the parent element has the following properties:

.parent {
  position: relative;
  height: 350px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

The parent contains a child element (a <div> or <span>), and I want this child to visually move outside the boundaries of the parent by using negative margins or positioning.

The problem is that because the parent has overflow: hidden, the child gets cut and doesn’t show outside the parent’s boundaries.
I cannot remove overflow: hidden on the parent because removing it breaks the design of other elements on the page, such as images or containers.

Here’s a simple example of what I’m working with:

<div class="parent">
  <!-- Other content inside the parent -->
  <div class="child">
    activity name
  </div>
</div>

And the child CSS:

.child {
  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  top: 0;
  right: -15px;
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

Currently, the child element is cut and does not appear outside the parent.

I have tried

• adjusting my margins and absolutr positioning
• adjusting z-index
• transform

What I’m looking for is a way to:

• Allow the child to escape the parent and appear outside its boundaries.
• Keep overflow: hidden on the parent so that other elements like images don’t break or overflow unexpectedly.

Can anyone suggest a solution for this?

I’m working on a layout where the parent element has the following properties:

.parent {
  position: relative;
  height: 350px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

The parent contains a child element (a <div> or <span>), and I want this child to visually move outside the boundaries of the parent by using negative margins or positioning.

The problem is that because the parent has overflow: hidden, the child gets cut and doesn’t show outside the parent’s boundaries.
I cannot remove overflow: hidden on the parent because removing it breaks the design of other elements on the page, such as images or containers.

Here’s a simple example of what I’m working with:

<div class="parent">
  <!-- Other content inside the parent -->
  <div class="child">
    activity name
  </div>
</div>

And the child CSS:

.child {
  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  top: 0;
  right: -15px;
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

Currently, the child element is cut and does not appear outside the parent.

I have tried

• adjusting my margins and absolutr positioning
• adjusting z-index
• transform

What I’m looking for is a way to:

• Allow the child to escape the parent and appear outside its boundaries.
• Keep overflow: hidden on the parent so that other elements like images don’t break or overflow unexpectedly.

Can anyone suggest a solution for this?

• html
• css
• overflow
• css-position

Share Improve this question Follow asked Mar 9 at 9:45 shashi kiranshashi kiran 4311 silver badge44 bronze badges 1

• Perhaps you are thinking about it the wrong way? I can't think of any instances where you would need a child outside the parent. If you can, putting both of you .parent and .child elements on the same level and giving them both a parent would (or anything else) would result in a more elegant solution. – oosh Commented Mar 9 at 21:05

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

You can't make the element appear outside its parent when the parent's overflow is hidden.

You can simulate this behavior using CSS anchor positioning. It's currently not supported in FF or Safari, but there's a polyfill.

Move the child element out of the parent, and position it to its original position using anchor:

.parent {
  anchor-name: --parent;

  position: relative;
  width: 50vw;
  height: 50vh;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.child {
  position-anchor: --parent;
  top: anchor(top);
  right: calc(anchor(right) - 15px);
  left: calc(anchor(left) + 15px);

  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

<div class="parent">
  <!-- Other content inside the parent -->
</div>

<div class="child">
  activity name
</div>

Another method that seemed to work is to create a div element solely for the purpose of styling and make it the parent for your parent div and child" div. In this instance I gave it the class of super-parent.

In the CSS you will give the super-parent and parent declarations the same properties except for a few minor changes. This is assuming that the parent element must retain its styling for specific reasons for your design.

As seen in the code below, the super-parent and parent will share common properties, the only difference is the position property will be added separately for the super-parent and the overflow property will also be added separately for the parent declaration.

N.b. You may have to place stricter constraints on your height and widths . I placed strict limits on the height and width to allow me to easily work it.

.super-parent,
.parent {
  height: 200px;
  width: 500px;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 0;
}

.super-parent {
  position: relative;
}

.parent {
  overflow: hidden;
}

.child {
  position: absolute;
  top: 40px;
  left: 400px;
  bottom: -20px;
  padding: 5px 10px;
  min-width: 50%;
  max-width: 300px;
  max-height: 100px;
  color: #fff;
  background: rgb(255, 145, 0);
  right: -15px;
  z-index: 3;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

<div class="super-parent">
  <div class="parent">
    <!-- Other content inside the parent -->
    <div class="child">
      activity name
    </div>
  </div>
</div>

本文标签：