Html 允许特定标签覆盖溢出：隐藏

Allow specific tag to override overflow:hidden

提问by user965369

I've got a <div>, that's a certain heightand width, and overflow:hiddenso that specfic inner images are clipped; however I want one image in the <div>to pop out of the border (ie to override the overflow:hidden), how do I do this?

我有一个<div>，那是一个height和width，overflow:hidden所以特定的内部图像被剪掉了；但是我希望 中的一个图像<div>弹出边框（即覆盖overflow:hidden），我该怎么做？

回答by parliament

The trick is to keep the overflow:hiddenelement with position:staticand position the overflowing element relative to a higher parent (rather than the overflow:hiddenparent). Like so:

诀窍是保持overflow:hidden元素与position:static溢出元素相对于更高的父元素（而不是overflow:hidden父元素）并将其定位。像这样：

.relative-wrap {
    /*relative on second parent*/
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
    
    /*no relative on immediate parent*/
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}

<div class="relative-wrap">
    
    <div class="overflow-wrap">
        
        <div class="respect-overflow">
        
        </div>
        <div class="no-overflow">
            
        </div>
        
    </div>
    
</div>

I also want to note, a very common use case for the desire to have an element overflow its container in this way is when you want animate the height of a dropdown or container from X to 0, and therefore need to have overflow: hiddenon the container. Usually you have something insidethe container that you want to overflow regardless. Since these elements are only accessibly when the container is "open", you can take advantage and set the overflow back to visibleafterthe container is fully open, and then set it back to hiddenbefore trying to animate the container back to height: 0.

我还想指出，希望元素以这种方式溢出其容器的一个非常常见的用例是当您希望将下拉列表或容器的高度从 X 设置为 0 时，因此需要overflow: hidden在容器上设置动画。通常，您在容器内有一些想要溢出的东西。由于这些元素仅在容器“打开”时才可访问，因此您可以利用并在容器完全打开visible后将溢出设置回 ，hidden然后在尝试将容器设置回动画之前将其设置回height: 0。

回答by Senica Gonzalez

I know this is an old post, but this can be done (at least in Chrome). I figured this out about two years ago and it's saved me a couple times.

我知道这是一篇旧帖子，但这可以完成（至少在 Chrome 中）。大约两年前我发现了这一点，它救了我几次。

Set the child to have position of fixed and use margins instead of top and left to position it.

将孩子设置为固定位置并使用边距而不是顶部和左侧来定位它。

#wrapper {
    width: 5px;
    height: 5px;
    border: 1px solid #000;
    overflow: hidden;
}

#parent {
    position: relative;
}

button {
    position: fixed;
    margin: 10px 0px 0px 30px;
}

Here is an example: http://jsfiddle.net/senica/Cupmb/

这是一个例子：http: //jsfiddle.net/senica/Cupmb/

回答by dylanmensaert

All given answers where not satisfying for me. They are all hackish in my opinion and difficult to implement in complex layouts.

所有给出的答案都不让我满意。在我看来，它们都是骇人听闻的，并且难以在复杂的布局中实现。

So here is a simple solution:

所以这是一个简单的解决方案：

Once a parent has a certain overflow, there is no way to let its children override this.

一旦父级有一定的溢出，就没有办法让它的子级覆盖它。

If a child needs to override the parent overflow, then a child can have a different overflow than the other children.

如果子级需要覆盖父级溢出，则子级可以具有与其他子级不同的溢出。

So definethe overflow on each childinstead ofdeclaring it on the parent:

因此，在每个孩子上定义溢出而不是在父级上声明它：

<div class="panel">
    <div class="outer">
        <div class="inner" style="background-color: red;">
            <div>
                title
            </div>

            <div>                     
                some content
            </div>
        </div>    
    </div>  
</div>

.outer {
    position: relative;
    overflow: hidden;
}    

.outer:hover {
    overflow: visible;
}  

.inner:hover {
    position: absolute;
}

Here is a fiddle:

这是一个小提琴：

http://jsfiddle.net/ryojeg1b/1/

http://jsfiddle.net/ryojeg1b/1/

回答by Jon

You cannot, unless you change your HTML layout and move that image out of the parent div. A little more context would help you find an acceptable solution.

您不能，除非您更改 HTML 布局并将该图像移出父 div。多一点上下文将帮助您找到可接受的解决方案。

回答by URL87

Wrap your overflow: hiddendivwith another divthat has a css property of -

overflow: hiddendiv用另一个div具有 css 属性的包裹你-

transform: translate(0, 0);

transform: translate(0, 0);

and in your specefic tag that you want it to override the - overflow: hidden, set it with -

并在您希望它覆盖 - 的特定标签中overflow: hidden，将其设置为 -

position: fixed;it will continue to be position relatively to its parent

position: fixed;它将继续相对于其母公司的位置

i.e -

IE -

.section {
    ...
    transform: translate(0, 0);
}

.not-hidden {
    position: fixed;
    ...
}

See the fiddle here

请参阅此处的小提琴

回答by nHaskins

You can overflow an element out of the div by wrapping it in another div, then set your image as position:absolute; and offset it using margins.

您可以通过将元素包装在另一个 div 中将其从 div 中溢出，然后将您的图像设置为 position:absolute; 并使用边距抵消它。

<div class="no-overflow">
<div>
<img class="escape" src="wherever.jpg" />
</div>
</div>

.no-overflow{
overflow:hidden;
width: 500px
height: 100px
}

.escape{
position: absolute;
margin-bottom: -150px;
}

Example (tested in firefox + IE10) http://jsfiddle.net/Ps76J/

示例（在 firefox + IE10 中测试）http://jsfiddle.net/Ps76J/

回答by Αλ?κο?

All the above is nice but nothing beats JAVASCRIPT. (Using jquery). So,

以上所有都很好，但没有什么比这更好的了JAVASCRIPT。（使用jquery）。所以，

<script>
var element = $('#myID');
var pos = element.offset();
var height = element.height(); // optional
element.appendTo($('body')); // optional
element.css({
    position : 'fixed'
}).offset(pos).height(height);
</script>

What I do is, get the original position of the element (relative to the page), optionally get the height or width, optionally append the element to the body, apply the new css rule position : fixedand finally apply the original position and optionally width and height.

我所做的是，获取元素的原始位置（相对于页面），可选地获取高度或宽度，可选地将元素附加到正文，应用新的 css 规则position : fixed，最后应用原始位置以及可选的宽度和高度.

回答by Hyman Giffin

There is currently no way I am aware of to make a parent node with overflow hidden have children visible outside it (with the exception of position:fixedchildren).

目前我不知道如何使隐藏溢出的父节点在其外部可见子节点（子节点除外position:fixed）。

HOWEVER, it is possible to instead of using overflow, you can just use the outline property set to the color of the background combined with the z-index property to mask some elements while retaining others like so.

然而，可以不使用溢出，您可以只使用设置为背景颜色的轮廓属性与 z-index 属性相结合来屏蔽某些元素，同时保留其他元素。

.persuado-overflow-hidden {
 /*gives the appearance of overflow:hidden*/
  z-index: -100;
  position: relative;
  outline: 1000vw solid white;
  overflow: visible;
}
.overridevisible {
/*takes the element out of the persuado overflow hidden*/
  z-index: 1;
}
/*does the other styling to the text*/
.loremcontainer {
  width: 60vw;
  height: 60vh;
  margin: 20vw;
  border: 1px solid;
}
.loremtxt {
  width: 100vw;
  height: 100vh;
  margin: -20vh;
  z-index: -1;
}
.positionmessage {
  z-index: 100;
  position: absolute;
  top: -12vh;
  left: -5vw;
  right: -5vw;
  color: red;
}

<div class="persuado-overflow-hidden loremcontainer">
<div class="loremtxt">
<div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec.
</div>
</div>

回答by Slavic

overflow refers to the container not allowing oversized content to be displayed (when set to hidden). It's got nothing to do with inner elements that can have overflow:whatever, and still wont' be displayed.

溢出是指容器不允许显示超大内容（设置为隐藏时）。它与可以溢出的内部元素无关：无论如何，仍然不会显示。

回答by Johnny

Z-index doesnt seem to work, but here I have a workaround which worked fine for me, as I needed overflow only to be "visible" when hovering a child element:

Z-index 似乎不起作用，但在这里我有一个对我有用的解决方法，因为我只需要在悬停子元素时溢出才能“可见”：

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}