<link rel="stylesheet" type="text/css" href="css/addMenu.css">
<body>
<div class="divcon">
<div>
<div>菜单名称:<input/>
<input type="button" value="添加"/>
</div>
</div>
</div>
</body>
你的需求是这样么？你只要控制一下父级和子级的包含关系就可以实现了：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
* {
margin: 0
padding: 0
}
hr{margin: 10px 0 10px 0 }
li {
list-style: none
}
.nav {
height: 35px
position: relative
}
.bar{
position: absolute
right: 0
}
.bar ul li {
float: left
background: #3695D5
width: 50px
height: 35px
line-height: 35px
text-align: center
}
.box{border: 1px solid #000000}
</style>
<body>
<div class="nav">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div class="box">
<ul>
<li>1212</li>
<li>2323</li>
<li>3434</li>
<li>4545</li>
</ul>
</div>
<hr>
<div class="box">
<div class="nav">
<div class="bar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<ul>
<li>1212</li>
<li>2323</li>
<li>3434</li>
<li>4545</li>
</ul>
</div>
</body>
</html>
1、首先我不给div定位来看看两个div在浏览器中是如何显示的，具体的代码如下：
如下图，可以看到两个div在没使用定位的情况下显示的位置，我们可以发现div是个块，自动换行了。
2、相对定位：首先给div2使用相对定位，用position:relative来实现的，具体的代码如下：
可以看到如下图，div2的位置离div1的位置偏移了上边四十个像素，左边四十个像素。
3、绝对定位：现在来看看绝对定位，使得div1和div2能重叠，具体的代码如下：
如下图是不是发现两个div块重叠了，具体的效果如下图。
4、绝对定位：现在我来使得div1的绝对定位边60px，左边60px，看看执行的效果是什么样子呢？具体的代码如下：
可以看到如下图的执行效果，是不是得出了绝对定位的定位点是浏览器左上角坐标点为(0,0)这个像素点为起点的。
5、div块加文字P:这里为了说明下个定位相关的知识，我先做如下的模型，具体的代码如下：
如下图可以看到文字在div块中，那么我们该如何使得div中文字总是在div块中呢,这里说的是使用绝对定位的情况下。
6、div和文字：将div块设置成绝对定位，看看文字显示的位置，具体的代码如下：
如下图，是不是发现文字没有在div块中了。
7、div绝对定位下块中的文字：这里我要实现div在绝对定定位下，div以及能在块中，具体的代码如下：
上面相对，下面绝对，具体的显示效果如下图。
