Question

我有3个带有class = box的LI，它们的样式是隐藏溢出的。我需要在一个框内创建一个带有class = badge的DIV（在本例中是第3个/蓝色框）。

我的目标是：
1.该徽章DIV（设置为绝对位置）遵循或可以用作该特定框的相对位置作为参考。 2.这个黄色徽章DIV可以显示在蓝框之外。

我一直在尝试很多事情来完成这个任务不可能的代码，但我想知道这里是否有人已经这样做了。

首选解决方案：Javascript或jQuery，如果可能的话，在IE8中可行，如果不是至少IE9。

HTML：

<div class="container">
    <li class="box" style="background-color: red;">
        red
    </li>
    <li class="box" style="background-color: green;">
        green
    </li>
    <li class="box" style="background-color: blue;">
        <div style="background-color: #ff0;" class="badge">badge</div>
        blue
    </li>
</div>

的CSS：

.container {
    border:1px solid black;
    width: 500px;
    height: 120px;
    margin: 20px auto 0px;
    background-color: grey;
}
.badge {
    position: absolute;
    width:100px;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    bottom: -55px;
}
.box {
    float: left;
    width:100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px; 5px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    /*overflow: hidden;*/
}

注意：溢出隐藏代码被注释，以便您查看我需要的输出。

我在这里有一个jsfiddle以供快速参考：
http://jsfiddle.net/philcyb/1m73qewm/

Answer 1

您可以尝试like this：

var $badge = $('div.badge'),
    xOffset = $badge.offset();
$badge.appendTo('body').css({
    top: xOffset.top,
    left: xOffset.left
});

您可能还需要添加scrollTop（）等。

Answer 2

因此，您需要支持的最简单的解决方案是添加另一个为您剪辑的父级。

简单具有.box > .box-inner > text + badge

等结构

如何找到你的蓝盒子的一个例子是。

<li class="box" style="background-color: blue;">
    <div class="box-inner">
        Blue
    </div>
    <div style="background-color: #ff0;" class="badge">badge</div>
</li>

内盒的CSS将是

.box-inner {
   width:100%;
   height:100%;
   overflow:hidden;
}

我已经更新了你的小提琴。

<强> FIDDLE http://jsfiddle.net/1m73qewm/12/

Answer 3

HTML：

<li class="box" style="background-color: blue;">
    <div style="background-color: #ff0;" class="box">badge</div>
    blue
</li>

CSS：

.box {
    float: left;
    width:100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px; 5px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

我认为这就是你的意思！只需查看上述代码中的更改。

如何在LI内强制DIV（具有溢出隐藏样式）仍然显示

3 个答案: