Css z索引在sharepoint母版页中不起作用

Css z索引在sharepoint母版页中不起作用,css,sharepoint,Css,Sharepoint,我正在为sharepoint制作一个包含3层的新母版页。我首先用php创建了这个页面,它在Chrome中运行得非常好,然后在添加了作为第一行之后,我终于能够在IE8中正确运行z索引。然而,当我添加必要的代码使其成为主页时,无论是在Chrome还是IE8中,分层都不再有效 代码:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt

我正在为sharepoint制作一个包含3层的新母版页。我首先用php创建了这个页面,它在Chrome中运行得非常好,然后在添加了
作为第一行之后,我终于能够在IE8中正确运行z索引。然而,当我添加必要的代码使其成为主页时,无论是在Chrome还是IE8中,分层都不再有效

代码:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Master Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<html dir="ltr">

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SharePoint:RobotsMetaTag runat="server"></SharePoint:RobotsMetaTag>
<title>Untitled 1</title>
<asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
<style>
.gradient{
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ab87, endColorstr=#7c796a)";
    background: -webkit-gradient(linear, left top, left bottom, from(#b3ab87), to(#7c796a)); 
}
.gradient2{
    background: -webkit-gradient(linear, left top, right top, from(#dded9e), to(#fff), color-stop(0.7, #fff));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFdded9e, endColorstr=#FFFFFFFF, GradientType=1)";
}
.gradient3{
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7c796a, endColorstr=#b3ab87)";
    background: -webkit-gradient(linear, left top, left bottom, from(#7c796a), to(#b3ab87)); 
}
a:link{
    color:orange;
}
</style>

</head>

<body bgcolor="#b3ab87" style="font-family:'Arial';margin:0;padding:0">

<form id="form1" runat="server">
<div style="margin:0 auto;width:960px;position:relative">
    <div style="background-image:url('../SiteAssets/headerMainNEW.jpg');width:960px;height:155px;top:0;position:relative;z-index:2">
        <div style="top:40px;left:50px;font-size:2.9em;font-family:'Calibri';color:#938d81;position:relative;z-index:3">
            Site Name
        </div>
        <div style="float:right;width:195px;height:35px;margin-top:-52px;position:relative" class="gradient2">
        </div>
    </div>
    <div style="width:970px;margin-left:-5px;margin-top:-155px;height:155px;z-index:1;position:absolute" class="gradient">
    </div>
    <div style="width:970px;margin-left:-5px;margin-top:-19px;z-index:1;position:relative;overflow:auto" class="gradient3">
        <div style="margin:0 auto;width:960px;position:relative;margin-top:18px;background-color:#777777;z-index:2">

    <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
        </asp:ContentPlaceHolder>
</div>
    </div>
    <div style="color:#ffffff;font-size:0.75em;line-height:18px;position:relative">
        <div style="margin:10px">
            <span style="float:left">
                Footer text left
            </span>
            <span style="float:right">
                Footer text right
            </span>
        </div>
    </div>

</div>

</form>

</body>

</html>

无标题1
.梯度{
-ms过滤器:“progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ab87,endColorstr=#7c796a)”;
背景:-webkit渐变(线性、左上、左下、从(#b3ab87)到(#7c796a));
}
.梯度2{
背景:-webkit渐变(线性、左上、右上、从(#dded9e)到(#fff)、颜色停止(0.7,#fff));
-ms过滤器:“progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFdded9e,endColorstr=#ffffffffff,GradientType=1)”;
}
.梯度3{
-ms过滤器:“progid:DXImageTransform.Microsoft.gradient(startColorstr=#7c796a,endColorstr=#b3ab87)”;
背景:-webkit渐变(线性,左上,左下,从(#7c796a)到(#b3ab87));
}
a:链接{
颜色:橙色;
}
站点名称
左页脚文本
页脚文本右侧

结果表明,失败的不是z索引,而是梯度代码。我现在把它换成了纯色背景,效果很好。我会看看是否可以让渐变代码工作,否则我可能只需要创建渐变图像。

Ugh。所有这些内联样式都必须取消。同意。一旦我让页面正常工作,我将分离css并使用所需的样式进行设置,以使所有内容看起来也符合我们的要求,但现在我只是将其放在那里进行测试,并将其保存在一个文件中。