Html 相对于父级未应用CSS_Html_Css_Parent Child

Html 相对于父级未应用CSS

html css

Html 相对于父级未应用CSS,html,css,parent-child,Html,Css,Parent Child,我有一个ID为“”外部“的div，它位于ID为“”容器“的div内部。我正在尝试调整相对于父级的外部div属性，即其宽度、高度等应相对于容器div。我不理解为什么不应用它。我知道因为这个原因，我的菜单也没有调整。有人能找出我代码中的错误吗？谢谢 HTML代码： <body> <div id="container"> <header> <img width="60%" alt="Logo" src="images/logo.jpg"> <div

我有一个ID为“”外部“的div，它位于ID为“”容器“的div内部。我正在尝试调整相对于父级的外部div属性，即其宽度、高度等应相对于

容器div。我不理解为什么不应用它。我知道因为这个原因，我的菜单也没有调整。有人能找出我代码中的错误吗？谢谢
HTML代码：
<body>
<div id="container">
<header>
<img width="60%" alt="Logo" src="images/logo.jpg">
<div id="divHeader"><br /><br />
<input type="text" placeholder="Enter text here">
<input type="radio" value="Pages" checked="true" name="searchOpt">Pages
<input type="radio" value="Contact People" name="searchOpt"/>Contact People
<input type="button"  value="Search"/>
</div>
</header>
<!--pop up menu-->
<div id="outer">
<div id="menu">
<ul id="nav">
    <li id="nav1"><a href="">News & Events</a></li>
    <li id="nav2"><a href="">Facilities</a></li>
    <li id="nav3"><a href="">Research</a></li>
    <li id="nav4"><a href="">Programmes</a></li>
    <li id="nav5"><a href="">Faculty</a></li>
</ul>
</div>
</div>
</div>
</body>

body { 

background-color:#0a1857;
}
#container
{
width:80%;
height:100%;
background-color:#FFFFFF;
position:fixed;
right:10%;
left:10%; 
}
header
{
width:100%;
height:15%;}

#divHeader
{
float:right;}

#outer
{
padding-left:20%;
width:80%;
height:40%;
background-image:url('images/image_31.jpg');
background-repeat:no-repeat;
background-position:center; }

#menu { 
position:relative;
top:220px;
right:170px;  
 width:108%;
height:20%;
text-align:center;
}
#menu a { 
display: block; 
text-decoration: none; 
color: #3B5330;}
#menu a:hover { background: #B0BD97;}

#menu ul li {
font:12px georgia; 
list-style-type:none;
float: left; 
width: 20%; 
font-weight: bold; 
border-top: solid 1px #283923; 
border-bottom: solid 1px #283923; 
background: #979E71;}
#menu ul li a { 
font-weight: bold;
padding: 15px 10px;}
#menu li{ 
position:relative; 
float:left;}
#popup_menu ul li
{
float:none;
 }

您是否尝试添加：
position: relative;

到外部分区？
我找到了问题的主要原因。我的孩子div根据浏览器进行定位和安排，而不是像家长那样，因为：
位置：相对
我将其替换为：
位置：绝对位置
参考来自
相对定位的元素相对于其正常位置定位。相对定位元素的内容可以移动并与其他元素重叠，但元素的保留空间仍保留在正常流中。用于元素充当容器。

绝对定位的元素相对于第一个父元素定位，该父元素的位置不是静态的。如果没有找到这样的元素，则包含的块是html
tag
我补充说，但仍然没有工作。若我调整浏览器的大小，外部div和menu都会从容器中取出。