2014-09-30 102 views
-3

我需要創建以下佈局: 有一個容器可容納站點的所有內容,容器需要在瀏覽器窗口中居中。該容器具有非固定高度,因爲它需要隨內容一起擴展。在容器內部會有另一個div來存放實際的頁面內容。CSS - 重疊div的定位

然後我的問題,需我重疊的容器div的左邊界,因爲這將是一個非常特殊的邊境特殊股利(不使用任何的CSS邊框屬性的提示)。

沒關係改變與JavaScript中的重疊div的高度(你不需要告訴我如何)。但是我希望只在html和css中完成定位。我將非常感謝所有的建議。

+2

您將獲得更快的幫助,如果你發佈你想出了到現在爲止的代碼,該代碼的像http://jsfiddle.net網站上的演示 – Arbel 2014-09-30 20:18:38

+0

向我們展示你的代碼迄今爲止。另外,請解釋您的邊框有什麼特別的地方,它不能被渲染爲邊框。 – 2014-09-30 20:21:00

+0

Div不是背景嗎? – Foxsk8 2014-09-30 20:22:48

回答

0

很無聊,於是決定練,繼承人DEMO

<div id="container"> 
    <div id="content"> 
    <p> Hey I am the content</p> 
     <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
      <p> Hey I am the content</p> 
    </div> 
    <div id="special"> 

    </div> 

</div> 

#container {background: orange; 
width:50%; 
margin:0 auto; 
padding: 10px 30px; 
position:relative} 

#content { background: brown} 

#special {position:absolute; 
    top:0; 
    left: -30px; 
    width: 60px; 
    background: red; 
} 


var height= $("#container").css("height"); 
height = height.replace("px",""); 
height = parseInt(height) + 20; 

$("#special").css("height",height); 
+0

謝謝!這與我所嘗試的非常相似。不知道我的代碼爲什麼不起作用。但是,我現在應該可以立即開始工作。 – jimutt 2014-09-30 21:37:36

0

沒有足夠的信息..但也許這樣的事情...

#overlap_div{ 
    position:absolute; z-index:9; left:0px, top: 0px; 
} 

,並參考容器position:relative