Question

我的divs互相覆盖，这是非意图的。我通过调试器运行它并没有出现... 我正在尝试建立一个弹出菜单。

这是我的HTML：

   <!doctype html>
<html>
<head>
    <link rel="stylesheet" href="noteBack.css">    
</head>
<body>
    <div class="container">
        <header><span>Note</span></header>
        <div class="sub-header"><span>friday 25.7.13 </span></div>
    </div>
</body>
</html>

这是我的css：

.container{
    position:relative;
    width:382px;
    border:1px solid black;
}
header{
    position:absolute;
    width:100%;
    height:41px;
    color:white;
    background-color:#de4b4b;   
    font-weight: bold;
    font-size:14px;
    margin:auto;
}
header span{
    display:inline-block;
    padding-left:172px;
    padding-top:14px;
    padding-bottom:14px;    
}
.sub-header{
    position:absolute;
    width:100%;
    height:37px;
    background-color:white;
    font-size:10px;
    margin:auto; 
}
.sub-header span{
    display:inline-block;
    padding:bottom:14px;
}

任何帮助将不胜感激。

JsFiddle

Answer 1

您的定位系统导致问题，请尝试此css

.container{
    /*container position should be absolute*/
    position:absolute;
    width:382px;
    border:1px solid black;
}
header{
    /*header position should be relative*/
    position:relative;
    width:100%;
    height:41px;
    color:white;
    background-color:#de4b4b;   
    font-weight: bold;
    font-size:14px;
    margin:auto;
}
header span{
    display:inline-block;
    padding-left:172px;
    padding-top:14px;
    padding-bottom:14px;    
}
.sub-header{
    /*sub-header position should be relative*/
    position:relative;
    width:100%;
    height:37px;
    background-color:white;
    font-size:10px;
    margin:auto; 
}
.sub-header span{
    display:inline-block;
    padding:bottom:14px;
}

我的divs违背我的意愿相互掩饰

1 个答案: