Question

参考：http://www.stephenkelzer.com/design.html
仅针对firefox进行了优化（如果在其他浏览器中查看，可能会发现额外的错误

- 第一次发帖海报的人，我真的可以在这里使用一些帮助，谢谢！

我在这里建立一个非常简单的投资组合页面，我打算稍后进行扩展。

我想为Chris Coyier在他的网站上为每个模块添加分层效果：http://css-tricks.com/

我已将图层设为绿色和黄色，以帮助他们脱颖而出

HTML标记：

<div id="mh-com" class="abc portmodule">
    <div class="portmoduleimg"></div>
        <div class="portmoduleinfo">
            <h3><a href="http://www.marlonheimerl.com/" rel="nofollow">MarlonHeimerl.com</a></h3>
            <p>...</p>
        </div>
    </div>
<div id="business-template" class="zxc portmodule">
    <div class="portmoduleimg"></div>
        <div class="portmoduleinfo">
            <h3><a href="" rel="nofollow">Business Template</a></h3>
            <p>...</p>
        </div>
    </div>

CSS标记：

.portmodule {
margin-top: 25px;
height:300px;
overflow: hidden;
width:969px;
background-color:rgb(98, 109, 111);
color: rgb(192,204,206);
}
.portmodule:after, .portmodule:before {
content:"";
position: absolute;
top:6px;
left:6px;
background-color: green;
width:100%;
height:100%;
z-index: -1;
}
.portmodule:before {
top:12px;
left:12px;
background-color: yellow;
}

我想这样做，以便每个单独的模块都具有分层效果。我希望你们能帮助我！谢谢！

Answer 1

http://www.codepen.io/thestevekelzer/pen/ibmta

我找到了一个“小解决方案”...... 我的意思是，我不认为这是一种首选方法。

似乎绝对定位：前＆amp; ：伪元素全部基于父元素，而不是我想的子元素。您将在我的forked codepen中注意到，我已经增加了'business-template'元素的顶部调整，以适应它在页面上较低的位置。

如果有人知道更简单的解决方案，我仍然会喜欢它。谢谢!!!

：之后和：之前是崩溃？

1 个答案: