[英]z-index not working in sharepoint master page
I am making a new master page for sharepoint which includes 3 layers.我正在为 sharepoint 制作一个新的母版页,其中包括 3 个图层。 I first made the page in php and it worked perfectly in Chrome and then after adding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
as the first line I was finally able to get the z-index working correctly in IE8.我首先在 php 中创建页面,它在 Chrome 中完美运行,然后在添加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
作为第一行,我终于能够让 z-index 在 IE8 中正常工作。 However, when I then added in the necessary code to make it a master page the layering no longer worked in either Chrome or IE8.但是,当我添加必要的代码以使其成为母版页时,分层不再在 Chrome 或 IE8 中工作。
Code:-代码:-
<!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>
Turns out that it was not the z-index that was failing, but the gradient code.事实证明,失败的不是 z-index,而是梯度代码。 I switched it to solid background color for now and it worked as intended.
我暂时将其切换为纯背景色,并且按预期工作。 I will see if I can get the gradient code to work or otherwise I may just have to create gradient images instead.
我会看看我是否可以让渐变代码起作用,否则我可能只需要创建渐变图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.