Absolute Div正在削減負邊距

編輯：我修改了我的代碼，我知道在左上角有所需的效果，但現在我的內容容器不會自動向下延伸（有黑色背景JSFIDDLE2 Absolute Div正在削減負邊距

我一直在嘗試在div上添加一個懸停標籤，但它似乎被截斷了，我試了幾個小時才使它工作沒有成功。親戚，孩子是絕對的，但每當我設置子容器溢出：自動，它會被剪切。這是js小提琴，所以你可以看到我在說什麼（TEST123在左上角）Fiddle。需要右側容器中的內容自動增長父分區。我試圖讓TEST123看起來像「運輸」示例那樣位於左上角： enter image description here ;定位它在父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 
}

來源

2013-07-26 RomeNYRR

爲什麼你有VAL頂部和左側的設置爲-30px？ –

我不知道你在這裏試圖達到什麼......因爲你是父母的div沒有左或頂值和被「剪輯」的div已經離開：-30和頂部：-30，div在視口外定位30px。因爲這就是你已經設置它在你的CSS做... –

所以你想要@Ovidio你可以張貼你想要的結果圖像.... –

剛纔已經分叉的小提琴向您展示一種解決方法的頂部，當我試圖結果不切斷文本。基本上我把所有東西都包裹在一個outerContentContainer中。標籤div現在絕對定位爲outerContentContainer的直接子元素。然後你可以添加overflow：隱藏到你的contentContainer。

似乎有點像一個黑客攻擊，但溢出：隱藏或自動將剪輯的內容，但你需要它，以自動展開，根據孩子的div

的js小提琴在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; 
}

永

來源

2013-07-26 08:42:00 wingyip

Absolute Div正在削減負邊距

回答

相關問題