Html z-索引-徽标位于标题后面
我正在制作一个网站,但是我的徽标在标题后面,即使z指数设置得更高。我不知道为什么?我已经设定了一个定位,为什么它不起作用?覆盖层都是透明的.png,因为我想让它与所有浏览器兼容,而RGBa不是 css是:Html z-索引-徽标位于标题后面,html,css,Html,Css,我正在制作一个网站,但是我的徽标在标题后面,即使z指数设置得更高。我不知道为什么?我已经设定了一个定位,为什么它不起作用?覆盖层都是透明的.png,因为我想让它与所有浏览器兼容,而RGBa不是 css是: @charset "utf-8"; body { margin-left: 0px; margin-right:0px; margin-top: 0px; padding:0px; z-index:-101; } #wrapper{ mar
@charset "utf-8";
body {
margin-left: 0px;
margin-right:0px;
margin-top: 0px;
padding:0px;
z-index:-101;
}
#wrapper{
margin-left:17.3875%;
}
#BG {
height: auto;
width: 100%;
position: fixed;
z-index: -100;
left: 0px;
top: 0px;
min-height: 100%;
min-width: 1040px;
}
/*HEADER*/
/*===================================================================*/
#header{
margin:0px;
padding:0px;
z-index:-98;
position:fixed;
z-index:-99;
width:65.225%;
height:18.2022472%;
background:url(WireFrame/Nav%20Bar.png)
}
.logocontainer{
width:34.1510157%;
height:100%;
margin:0;
padding:0;
z-index:-1;
position:absolute;
}
.logoimage{
max-height:100%;
max-width:100%;
z-index:1;
position:absolute;
}
#navigation{
}
/*BODY*/
/*===================================================================*/
#bodyoverlay{
background:url(WireFrame/Body.png);
position:fixed;
z-index:-99;
height:100%;
width:65.225%;
background-repeat:repeat-y
}
#body{
z-index:-98;
height:100%;
width: 100%;
}
html是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="file:///U|/Year 8/ICT/Webdesign/WireFrame/Background.jpg" name="BG" width="4000" height="2670" id="BG" />
<div id = "wrapper">
<header>
<div id = "header">
<div class="logocontainer">
<img src="WireFrame/Logo.png" class="logoimage" /> </div>
<nav>
<div id = "navigation"> </div>
</nav>
</div>
</header>
<!---->
<div id = "body">
<div id = "bodyoverlay">
</div>
<div id = "Content">
</div>
</div>
</div>
</body>
</html>
家
布局中的项目应该是CSS背景,而不是内联图像。这会使所有这些问题突然消失。使用z-index
属性的方式有很多问题:
- 首先,您必须为具有
z索引的每个元素定义
位置
- 其次,
并不是绝对地对页面中的所有内容进行排序——存在不同的堆叠上下文z-index
- (在
#标题中也有多个
e)z-index
这里的和应该有助于您解决代码中的问题。您指的是什么?徽标等。如果它不是内容(界面的一部分),它应该是背景图像,而不是内联图像。这样你就不必玩各种定位游戏了。@Diodeus我同意背景是CSS的一部分,但是logo通常是主页的链接,所以我觉得保留它作为页面内容是有意义的,在这种情况下,图像应该是a-tag的背景图像。出于某种原因,我从来没有想过在链接上添加背景