html - 绝对 Div 被裁剪为负边距

Question

编辑:我修改了我的代码，我知道在左上角有预期的效果，但现在我的内容容器不会自动向下延伸(有黑色背景。 JSFIDDLE2

我一直在尝试在 div 上添加一个悬停标签，但它似乎被剪掉了，我已经尝试了几个小时，但没有成功。父项设置为相对的，子项是绝对的，但是每当我将子容器设置为溢出:自动时，它就会被剪裁。这是 js fiddle ，所以你可以看到我在说什么(左上角的 TEST123)Fiddle .我还需要右侧容器中的内容来自动增长父 div。我试图让左上角的 corener 显示 TEST123，就像“传输”示例一样: ;我尝试的结果是在将文本放在父 div 的顶部时没有切断文本

HTML

    <div class="contentcontainer">
        <div class="labels">Test 123</div> 

<div id="instructors">PlaceHOlder</div>
<div id="ccleft">
 <h1 class="orange">Sample</h1>
                        <ul id="instructorbullets">
                            <li>1st Degree Blackbelt</li>
                            <li>Criminal Justice Major</li>
                            <li>Proud Dad of A.J.</li>
                        </ul>
                        <p class="normal"> lorem ipsum </p>
</div>
<div id="ccright"><div id="ccrightcontainter"><div id="ccrightcontaintertext"><h1 class="blue">About The Instructor</h1><p class="normal"> foo bar baz <br /><br />Lorem baz<br /><br />More text</p></div></div></div>
</div>

CSS

 .clear { clear: both:}

    #.labels {
 position: absolute;
 left: -15px;
 top: -15px;
 padding: 10px 10px;
 height: 35px;
 background: #0FF;
 color: #d94a3c;
 font-family: font1;
 font-size: 2.0em;
 z-index: 1;
 clear: both;
}
 #.contentcontainer {
 position: relative;
 margin: 0 auto;
 width: 940px;
 background: #fff;
 padding-top: 20px;
 padding-bottom:20px;
 overflow:auto;
 clear:both
}
#ccleft {
    position: relative;
    margin-left: 15px;
    width: 350px;
    float: left;
    clear: both;
}
#ccright {
    position: relative;
    padding-left: 5px;
    width: 570px;
    float: left;
}
#ccrightcontainter {
    position: relative;
    width: 550px;
    background: #eaeaea;
    border-radius: 5px;
    clear: both
}
#ccrightcontaintertext {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    max-width: 500px;
    clear: both
}

Answer 1

刚刚 fork 你的 fiddle 来向你展示一个解决方法。基本上，我将所有内容都包装在一个 outerContentContainer 中。标签 div 现在绝对定位为 outerContentContainer 的直接子级。然后，您可以将 overflow:hidden 添加到您的 contentContainer。

似乎有点 hack，但 overflow:hidden 或 auto 会剪切您的内容，但您需要它才能根据子 div 自动扩展

Js fiddle 位于 http://jsfiddle.net/a3TvU/2/

<div class="outerContentContainer">
<div class="labels">Test 123</div> 
<div class="contentcontainer">

CSS 是

.labels {
    position: absolute;
    top:-30px;
    left:-30px;
    padding: 10px 10px;
    height: 35px; 
    background: #0FF;
    color: #d94a3c;
    font-family: font1; 
    font-size: 2.0em;
    z-index: 1;
    clear: both;

}

.contentcontainer { 
    position: relative;
    margin: 0 auto;
    width: 940px;
    color: #fff;
    background: #000;
    padding-top: 20px;
    padding-bottom:20px;
    overflow:hidden;
}
.outerContentContainer{
    position:relative;
}

翅膀