相关疑难解决方法(0)

我做了一个小提琴供参考:http://jsfiddle.net/kLFn9/

该overflow:hidden问题被突出显示.

基本上,我:hover:after用来显示工具提示.但是父元素就overflow: hidden在它上面.我如何强制悬停的元素逃脱父元素？

相关CSS:

div {
    width:500px;
    height:200px;
    background:red;   
    margin: 50px;
    overflow: hidden; /* this rule */
}

span:hover:after {
    content: attr(data-name); 
    color: black;
    position: absolute;
    top: -150px;;
    left: 0;   
}

我已经设置overflow:hidden了一个容器.我想为容器内部的元素设置绝对位置,以便它显示在容器外部,但是隐藏溢出不会让它显示.

对我来说,使用overflow:hidden容器是很重要的,因为我在容器中有很多元素.反正有没有让它与overflow:hidden？

它的父元素wrap是body标签,根据它很难确定位置.

HTML:

<div class="wrap">
    <div class="box">
        <span>Left</span>
        <div class="main"></div>
    </div>    
</div>

CSS:

.wrap{
    width: 500px;
    margin: 50px auto;
    border: 1px solid green;
    overflow: hidden;    /*causes the problem */
}

.box{
    position: relative
}

.main{
    width: 100px;
    height: 100px;
    background: green;
}

span{
    position: absolute;
    left: -50px;
}

演示: http ://jsfiddle.net/c55hS/

我有一个div,div的高度为200px.在div内部有文本,我不希望div有滚动条,因此我设置溢出:隐藏.

现在,在该div内部还有一个列表,作为下拉框.当你点击列表/下拉框时,我希望它出现在主要div的TOP上.

这是一个溢出主div的例子:hidden:

这是一个没有溢出的例子:隐藏.所以我想要以下但文字没有溢出.

jsFiddle:http://jsfiddle.net/w8kQA/

我想在具有自定义滚动功能的相当复杂的编辑器中在项目旁边显示工具提示。工具提示应该“转义”已overflow: hidden设置为限制视口的容器。

这是一个显示问题的示例：

.container {
  border: 1px black solid;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.inner {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.column {
  background-color: #99FF99;
  padding: 25px;
}

.tooltip-container {
  position: relative;
}

.content {
  background-color: #9999FF;
  width: 50px;
  height: 50px;
}

.tooltip {
  z-index: 1;
  background-color: #FF9999;
  display: none;
  position: absolute;
  left: 100%;
  top: 0%;
  white-space: nowrap;
}

.tooltip-container:hover .tooltip {
  display: inline-block;
}

<div class="container">
  <div class="inner" id="inner" style="margin-left: …