如何制作一个独立的div ?

I made a theme with a navigation menu at top like this;

我做了一个主题，上面有一个导航菜单;

width="100%" height="100"

The left area contains customers logo at 100px height. However, they want logo to be bigger in side, say 200px. I don't want to increase the size of my div's size, instead, I want to make a new div at 200px-200px, put the logo inside it, and put that logo div over the navigation div.

左边是100px高度的客户logo。但是，他们想让logo更大，比如200px。我不想增加div的大小，我想在200px-200px新建一个div，把logo放在里面，把logo div放在导航栏上。

How can I make an independent div like this?

我怎样才能做出这样一个独立的div ?

4 个解决方案

#1

Is this what you mean? ofcourse the style should be done in separate css; not in the html!

你是这个意思吗?当然，样式应该在单独的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>

#2

create the div inside the navigation div, but give it position:absolute; width:200px; height:200px; top:0; left:0; that should place it top left of the navigation without affecting the height of the navigation.

在导航栏中创建div，但是要给它一个绝对的位置;宽度:200 px;身高:200 px;上图:0;左:0;这应该将它置于导航的左上角而不影响导航的高度。

Alternative is it place the logo before the navigation element do use the same styles to position them both starting in the same page location.

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

example:

例子:

#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>

I'd reccommend experimenting to find the best solution because I can't see your whole project.

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

Hope it helps.

希望它可以帮助。

#3

Here is a sample jsfiddle for you: http://jsfiddle.net/ZzaZp/

这里有一个示例jsfiddle: http://jsfiddle.net/ZzaZp/。

and copying the code here:

在这里复制代码:

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

here is the CSS sample which worked for me...

这是为我工作的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 */
}

#1