如何在其他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 */ 
}