如何制作一个独立于其他 div 的 div？答案

【问题标题】：How to make an independent div over other divs?如何制作一个独立于其他 div 的 div？
【发布时间】：2012-07-13 09:03:14
【问题描述】：

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

width="100%" height="100"

左侧区域包含高度为 100 像素的客户徽标。但是，他们希望徽标的侧面更大，例如 200 像素。我不想增加我的 div 的大小，相反，我想在 200px-200px 处创建一个新的 div，将 logo 放入其中，并将该 logo div 放在导航 div 上。

这样的独立div怎么做？

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

是的。我们是如何做到这一点的，使用 position: absolute？

【解决方案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>

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

希望对你有帮助。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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 */
}

【讨论】：