Question

可能是一个noob问题，但我无法理解css中的定位非常好。昨天我遇到了背景和下拉菜单的问题，所以我决定从头开始。问题依然存在。

我的h1无法处于我想要的位置，所以我找到了它的位置：亲戚然后我可以移动它，但是因为我不能点击我的下拉菜单甚至是徽标。只有一半。

HTML：

 <link rel="stylesheet" type="text/css" href="./style2.css"  />
 </head>
 <body>
 <div id="stajl">
 <ul>
 <li><a href="#">Home Page </a></li><li>
 <a href="#">Services <span class="arrow">&#9660;</span></a>
 <ul><li>
 <a href="#">Trades </a></li><li>
 <a href="#">Exchanges </a></li><li>
 <a href="#">Business to Business </a></li>
 </ul>
 <li><a href="#">About </a></li><li>
 <a href="#">Contact </a></li>
 </ul>
 </div>
 <div id="img">
 <a href="#"><img src="pfslogo2.png" /> </a>
 </div>
 <div id="header">
 <h1>We're here to help! </h1>
 </div>
 </body>
 </html>

CSS：

body {
overflow-y: scroll;}
#stajl ul {
list-style-type: none;
margin:0;
padding:0;
float: right;

}
#stajl ul li:hover a{
background-color: #d7e6fa;
}

#stajl ul li {
display: inline-block;

}

#stajl ul li a {
text-decoration: none;
display: block;
padding: 15px;
color: white;
background-color: #0099cc;

}

#stajl ul ul {
display: none;
position: absolute;
margin-left: -105px;
}
#stajl ul li:hover ul {
display: block;
}

#stajl ul ul li {
display: block;
color: white;
width: 352px;

}
#stajl ul li li a:hover {
color: cyan;
}
.arrow {
font-size: 10px;
vertical-align: middle;
}

#img img {
margin: 0;
padding: 0;
height: 50px;
width: 100px;
top: 0;
left:0;
}
#header h1 {
padding: 0;
margin:0;
text-align: center;
position: relative;
top: -40px;
left: -60px;
color: #0099cc;
}

由Dorvalla为我的问题创建的Codepen：codepen.io/anon/pen/VeXyRY

任何建议将不胜感激！感谢

Answer 1

将菜单的z-index设置为高于div的z-index。

Answer 2

H1正在阻挡光标，你需要将H1设置得更短：

#header {
  text-align:center;
}
#header h1 {
   display:inline-block;
}

http://codepen.io/niorad/pen/EPEQxJ

Answer 3

在您的h1上放置一个z-index: -1;，然后您的导航将再次有效。

Div的位置困扰着另一个div，所以我无法点击它们

3 个答案: