Question

点击按钮，我将新元素添加到列表中。每个元素都有自己的消息，该消息绝对针对此元素定位。这工作正常，直到我将'overflow：hidden'属性添加到父列表元素。显然，消息被隐藏了。如果overflow：hiddne属性必须到位，我如何显示每个新元素的消息？这是jsFiddle和代码：

HTML：

<span id='click-me'>Click me</span>
<ul id='list'></ul>

CSS：

#list {
    width:100px;
    height:100px;
    border: 1px solid blue;
    overflow:hidden;
}
.option {
    width:100px;
    height:20px;
    border: 1px solid green;
    position:relative;
}
.message {
    width: 79px;
    height: 20px;
    background: gray;
    position: absolute;
    right: -90px;
    top: 0;
}

JS：

$('#click-me').click(function() {
    $('#list').append("<li class='option'><div class='message'>I'm message</div></li>");
});

编辑：我尝试使用overflow-x和overflow-y属性。但不知何故，它没有按照我的预期去做。将这些属性添加到#list元素：

#list {
    ...
    overflow-y:hidden;
    overflow-x:visible;
}

创建底部滚动条。这是预期的行为吗？

Answer 1

将height的{{1}}更改为#list。

检查updated Fiddle。

克服溢出：父元素的隐藏属性

1 个答案: