css - 如何制作一个独立于其他 div 的 div？

Question

我做了一个像这样顶部有导航菜单的主题；

width="100%" height="100"

左侧区域包含高度为 100 像素的客户徽标。但是，他们希望徽标的侧面更大，例如 200 像素。我不想增加我的 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 */
}