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

我有一个

，就是一定的

高度
和
宽度
，和
溢出：隐藏
，这样特定的内部图像被剪裁；但是，我希望
中的一个图像从边框中弹出（即覆盖
溢出：隐藏的
），我如何做到这一点？
您不能，除非您更改HTML布局并将该图像移出父div。多一点上下文将帮助您找到可接受的解决方案。
溢出是指不允许显示过大内容的容器（设置为隐藏时）。它与可能有溢出的内部元素无关：不管怎样，仍然不会显示。
Z-index似乎不起作用，但这里我有一个解决方法，对我来说很好，因为我需要溢出，当悬停子元素时，它只会“可见”：

#parent {
   overflow: hidden;
}

#parent:hover {
   overflow: visible;
}

我知道这是一个老帖子，但这是可以做到的（至少在Chrome上）。我大约两年前就发现了这一点，这帮我省了好几次钱

将子对象的位置设置为“固定”，并使用边距而不是“上”和“左”来定位它

#包装器{
宽度：5px；
高度：5px；
边框：1px实心#000；
溢出：隐藏；
}
#母公司{
位置：相对位置；
}
钮扣{
位置：固定；
利润率：10px 0px 0px 30px；
}

下面是一个示例：
您可以将一个元素从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;
}


1.没有溢出{
溢出：隐藏；
宽度：500px
高度：100px
}
.逃跑{
位置：绝对位置；
边缘底部：-150px；
}

示例（在firefox+IE10中测试）
所有给出的答案都让我不满意。
在我看来，它们都很粗糙，很难在复杂的布局中实现

因此，这里有一个简单的解决方案：

一旦父级出现某个溢出，就无法让其子级覆盖该溢出

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

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

<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;
}


标题
一些内容
.外部{
位置：相对位置；
溢出：隐藏；
}    
.外部：悬停{
溢出：可见；
}  
.内部：悬停{
位置：绝对位置；
}

这是一把小提琴：

诀窍是将
溢出：隐藏的
元素与
位置：静态
保持一致，并将溢出元素相对于较高的父元素（而不是
溢出：隐藏的
父元素）进行定位。像这样：


。相对换行{
/*第二个父项上的相对*/
位置：相对位置；
}
.溢出包装{
高度：250px；
宽度：250px；
溢出：隐藏；
背景：浅蓝色；
/*直系父母无亲属关系*/
}
.尊重溢出{
位置：相对位置；
顶部：75px；
左：225px；
高度：50px；
宽度：50px；
背景：绿色；
}
1.没有溢出{
位置：绝对位置；
顶部：150px；
左：225px；
高度：50px；
宽度：50px；
背景：红色；
}
以上这些都很好，但没有什么能比得上
JAVASCRIPT
。
（使用
jquery
）。
所以


var元素=$（“#myID”）；
var pos=element.offset（）；
var height=element.height（）；//可选择的
元素。appendTo（$（'body'）；//可选择的
element.css({
位置：'固定'
}).偏移量（位置）、高度（高度）；

我要做的是，获取元素的原始位置（相对于页面），可选地获取高度或宽度，可选地将元素附加到主体，应用新的css规则
position:fixed
，最后应用原始位置以及可选的宽度和高度。
用另一个css属性为-

transform:translate（0,0）

在您希望它覆盖-
溢出：隐藏的specefic标记中，将其设置为-

位置：固定它将继续处于相对于其父级的位置

i、 e-

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

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

我目前还不知道如何使溢出隐藏的父节点的子节点在其外部可见（除了
位置：修复了
子节点）

但是，可以不使用溢出，只使用设置为背景颜色的outline属性和z-index属性来屏蔽某些元素，同时保留其他元素


.do溢出隐藏{
/*显示溢出：隐藏*/
z指数：-100；
位置：相对位置；
外形：1000vw纯白；
溢出：可见；
}
.不可推翻{
/*将元素从隐藏的溢出中取出*/
z指数：1；
}
/*其他样式是否与文本匹配*/
loremcontainer先生{
宽度：60vw；
高度：60vh；
利润率：20vw；
边框：1px实心；
}
.LoremText{
宽度：100vw；
高度：100vh；
保证金：-20vh；
z指数：-1；
}
.positionmessage{
z指数：100；
位置：绝对位置；
顶部：-12vh；
左：-5vw；
右图：-5vw；
颜色：红色；
}

然后，在converdo overflow:hidden元素内的段落之外有一个文本
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子，它是一个很好的例子。在调味品purus feugiat中，Etiam vulputate turpis eu lectus ornare。请不要把它放在一边，把它放在一边。潜力悬钩子。梅塞纳斯
.section {
    ...
    transform: translate(0, 0);
}

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

<div class="outer">
  <div class="inner">
    <img src="img1" alt="">
  </div> 
  <img src="img2" alt="">
</div>

.outer, .inner{
   position:relative;
}

.inner{
  overflow:hidden;
}

img{
  position:absolute;
}