Question

我是CSS新手，这只是一些培训内容。我创建了一个基本布局，并添加了一些带有元素的导航栏。问题是你无法看到完整的元素。我试图将margin-top属性更改为0但没有任何改变。我怎么能解决这个问题？

enter image description here

#container{
width:100%;
height:100%;
position:absolute;
}
#Header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
background-color:#FFF1D5;
}

#nav
{   
position:absolute;
top:20%;
left:0;
width:100%;
height:5%;
background-color:#660033;
text-align:center;


}

#nav ul li{
text-decoration:none;
display:inline-block;
margin-left:25px;
margin-right:25px;
margin-top:0;
}
#nav ul li a{
font-size:25px;
color:white;
position:center;
text-decoration:none;
display:inline-block;
}

#leftnav
{
position:absolute;
left:0;
top:25%;
width:20%;
height:55%;
background-color:yellow;
}

#body
{
position:absolute;
top:25%;
left:20%;
width:60%;
height:55%;
background-color:silver;
}

#rightnav
{
position:absolute;
top:25%;
right:0;
width:20%;
height:55%;
background-color:yellow;
}

#Footer{
position:absolute;
bottom:0;
left:0;
height:20%;
width:100%;
background-color:green;
}

编辑：

`<!DOCTYPE html>
<html>

<head>
    <link href = "üben_css.css" rel = "stylesheet">
    <title> K </title>
</head>

<body>  
    <div id="container">
        <div id="Header"> Das ist der Header </div>

        <div id="nav">

            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Produkte</a> </li>
                <li><a href="#">Kontakt</a> </li>

            </ul>

        </div>

        <div id="body"> Das ist der body </div>

        <div id="leftnav"> Linke Navigation</div>

        <div id="rightnav"> Rechte Navigation</div>

        <div id ="Footer"> Footer</div>
    </div>  

</body>

</html>`

Answer 1

如果我理解你的问题，那么：

#Header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%; /* This is set to 20%, try increase it */
background-color:#FFF1D5;
}

Answer 2

由于您的元素具有position属性，您可以为它们分配z-index属性以控制哪个元素位于顶部。此外，我个人不会有那么多元素与位置：绝对在那里。如果您决定要移动其中一个，那将是一件混乱的工作。尝试使用position：relative。

分配其中一些

http://www.w3schools.com/cssref/pr_pos_z-index.asp

更改<a> element in CSS</a>的边距顶部

2 个答案: