Question

我对此很陌生。我希望得到一些帮助，并建议保持我的divs并排。一个菜单工作正常，但现在我的内容重叠，我不知道我做了什么。我应该多次保存。任何关于定位我的div的建议都会被疯狂地欣赏。

如果我的帖子格式错误，请道歉。大脑是炒的，我的网站明天将上课。

body {
background-color: #35455e;
}

h1 {    
text-align: center; 
font-size: 400%; 
color: #ecb3ff;
padding-left: 30px;
}

h2 {    
text-align: center;
font-size: 300%;
color: #ecb3ff; 
padding-left: 40px;
}

ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}


a {
color: white;
text-decoration: none;  
font-size: 125%;
padding-left: 12px;
}

a:hover {
color: #fff666;
}

a:active {
color: #9bc1ff; 
}

div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}


div.main{

position: relative;
top: 500px;
right: 500px;

}

li {    
width: 30%; 
}




My HTML:


<!DOCTYPE html>

<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>

<div class="container">

<div class="header">

<h1>Madison Art Portfolio</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Photo.html">Photography</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</div><!--closing of header-->




<div class="main">

<h2>Madison Art Portfolio</h2>




</div><!--CLOSING OF MAIN-->








</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>

Answer 1

从div.main中删除所有代码。这不是必需的。同时删除位置：从div.header块固定。

Answer 2

当您在div.main中使用position:fixed;并在div.main中使用position:relative;时，您可以使用CSS中的z-index值更改它们的堆栈。如果您希望标题位于正面，主要位于背面，则在div.header中添加z-index:2，在div.main中添加z-index:1。

它是重叠的，因为你已经指定了标题的固定位置，它将标题放在固定的位置，页面上的任何内容都会与标题重叠。你可以尝试position:absolute

我的主要div被困在我的标题div上

2 个答案: