如何在其他div上製作獨立的div？

Question

我用頂部的導航菜單做了一個主題，像這樣;

width="100%" height="100" 

左側區域包含100px高度處的客戶徽標。但是，他們希望徽標在側面更大，例如200px。我不想增加div尺寸的大小，相反，我想在200px-200px的範圍內創建一個新的div，將徽標放入其中，並將該徽標div放在導航div上。

我該如何製作一個獨立的div？

Answer 1

這是你的意思嗎？風格應該在單獨的css中完成;不在html中！

<div id="topnavigation" style = "height:100px;width:100px;position:relative;z-index:5;"> 
    <div id="logo" style="width:200px;height:200px; position:absolute;z-index:10; top:15px;left:15px;"> <img src ="logo.jpg" width="200px" height="200px"/> </div> 
</div> 

Answer 2

創建導航DIV中的格，但給它position:absolute; width:200px; height:200px; top:0; left:0;應該把它導航的左上角，而不會影響導航的高度。

另一種方法是將徽標放置在之前，導航元素確實使用相同的樣式將它們放在同一個頁面位置。

例如：

#logo{ 
position:absolute; 
top:0; 
left:0; 
widht:200px; 
height:200px; 
} 


#navigation{ 
position:absolute; 
top:0; 
left:0; 
widht:100%; 
height:100%; 
} 

<div id='logo'></div> 
<div id='navigation'></div> 

我reccommend試驗，以找到最佳的解決方案，因爲我看不到你的整個項目。

希望它有幫助。

Answer 3

這是給你一個樣品的jsfiddle： http://jsfiddle.net/ZzaZp/

，並在這裏複製的代碼：

HTML：

<div class="navigation"> 
    <div class="logo"> 
     <img src="http://placekitten.com/200/200" /> 
    </div> 
</div> 

CSS：

.navigation{ 
    height:100px; 
    background-color:#f3f3f3; 
    position:relative; 
} 

.logo img{ 
    width:200px; 
    height:200px; 
    border:0px; 
    display:block; 
} 

.logo{ 
    position:absolute; 
    width:200px; 
    height:200px; 
    border:2px solid #eee; 
    left:20px; 
    top:20px; 
} 

Answer 4

這裏是CSS樣品爲我工作...

.logo { 
    position: absolute; 
    top: 0; 
    left: 0; /* can adjust div position by changing left and top etc */ 
    width: 100px; 
    height: 100px; /* width and height require to place it on top of certain size its an added advantage */ 
}