我从这个问题中学到了如何做叠加。然而，被接受的答案使用了一个空的div, Chris Coyier会认为这是"非语义的"，因为空的div纯粹是文体的，而不是语义的。
如何在没有空div的情况下进行叠加?
使用您发布的示例，您可以使用:after代替空元素。当然，你必须记住，:after不支持ie7和更低版本。在这种情况下，你可以使用javascript添加一个空元素，只适用于ie7及以下版本。
示例:http://jsfiddle.net/dppJw/2/
语义/风格的区别是一个很好的理想，当然是值得努力的事情，但不是你总能100%实现的事情，在我看来这是完全可以的。在web开发中，在某种程度上成为一个理想主义者是好事，但试图完美地坚持理想只会导致挫折和不兼容——你可以使用:after，但它不能在ie7中工作，它仍然有很大的市场份额。你可以直接告诉ie7用户升级或不使用你的网站，但这并不总是一个选项。
一个空的div是一个完全合理的方式来做一个覆盖，并没有一个真正好的，兼容的方式，我知道这样做。我假设你正在使用覆盖来使一个模态对话框或一些这样的-如果你真的想，你可能会把对话框在覆盖div和使用z排序，以确保你的对话框停留在上面。或者您可以使用jQuery动态地插入div，正如您链接到的问题所提到的:
$('div.parent').append('<div class="child" />');