Question

我有一个显示跨度和图像的页面，我们的想法是跨度出现在图像上方，以便图像显示在文本的透明部分后面：http://www.luckysaddleupholstery.com。

网页相当简单：

<body>
<div id="content" >
    <div id="nav">
        <ul id="pages">
            <li class="selected">
                <a href="/page/LUCKY_SADDLE/">LUCKY SADDLE</a></li>
            <li >
                <a href="/page/designs/">designs</a></li>
            <li >
                <a href="/page/info/">info</a></li>
            <li >
                <a href="/page/contact/">contact</a></li>
        </ul>
    <ul id="subpages">
    </ul>

        <div id="layoutItem40" class="layoutItem textItem titleText" style="left: 0px; top: 196px; width: 556px;"><span style="font-size: 42px; line-height: 42px; color: #B84C59;">VINTAGE. MODERN. TRADITIONAL. BY HAND. STUFFING. HIERLOOM. nostalgic. shabby. recycle. textiles. worn. forgotten. spring. unique. restore. </span>
        </div>
        <img id="logo" src="/static/img/logo.png"/>
        <div id="contact"><strong>T</strong> 07961 706 522<br /><span><strong>E</strong> <a href="mailto:ruth@luckysaddleupholstery.com">ruth@luckysaddleupholstery.com</a></span>
        </div>
    </div>

    <div id="bodyWrapper" style="top: 14px; position: absolute;">
    <div id="body" style="position: relative;">
        <div id="layoutItem49" class="layoutItem imageItem" style="left: 288px; top: 0px; width: 748px;">
            <img  src='/static/media/imgs/Richard-Moore-Chair-Main.jpg' />
        </div>
    </div>
    </div>
</div>
</body>
</html>

css的相关部分：

.layoutItem {
  position: absolute;
  margin-top: 3px;
  margin-left: 1px;
}
.textItem span {
  z-index: 10;
  margin-top: 2px;
  position: relative;
}
.imageItem img { 
  z-index: 1;
  position: relative;
}
#nav {
  width: 172px;
  height: 100%;
  top: 0px;
  position: fixed;
  padding-left: 1px;

}

有更多的css影响元素及其父母，但这是所有文本样式，而不是定位。

概念是导航栏中的大文本覆盖了主体div - 它包含图像，允许图像在下面滚动。

图像和文字是从CMS系统渲染出来的，这就是html稍微有点复杂的原因，虽然可以自定义！

在Firefox中渲染得很好，但最近似乎在最新版本的Safari / Webkit中已经破解。

Css z-index在safari和webkit中不起作用

0 个答案: