How to make an independent div over other divs?

Question

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.

How can I make an independent div like this?

Answer 1

Is this what you mean? ofcourse the style should be done in separate css; not in the 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

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.

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;
 width:200px;
 height:200px;
}


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

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

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

Hope it helps.