如何对其他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中创建div，但是给它position:absolute; width:200px; height:200px; top:0; left:0;，它应该放在导航的左上角而不影响导航的高度。

另一种方法是将徽标放在之前导航元素使用相同的样式来定位它们从同一页面位置开始。

示例：

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


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

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

我建议尝试寻找最佳解决方案，因为我无法看到整个项目。

希望它有所帮助。

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 */
}