Doing overlays without an empty div

I learned from this question how to do overlays. However, the accepted answer uses an e开发者_JAVA技巧mpty div, which Chris Coyier would argue is "not semantic" because the empty div is purely stylistic, not semantic.

How can I do overlays without an empty div?

---

Using the example you posted, you can use :after instead an empty element. Of course you have to keep in mind that :after is not supported by ie7 and lower. In this case you can use javascript to add an empty element only for ie7 and lower.

Example: http://jsfiddle.net/dppJw/2/

---

The semantic/stylistic distinction is a nice ideal, and certainly something to strive for, but isn't something that you can always achieve 100%, and imo that's perfectly fine. In web development, it's good to be an idealist to some extent, but trying to adhere perfectly to ideals will just lead to frustration and incompatibility - you can use :after, but it won't work in ie7, which still has a big market share. You can just tell ie7 users to upgrade or not use your website, but that's not always an option.

An empty div is a perfectly reasonable way to do an overlay, and there's not really a good, compatible way that I'm aware of to do it otherwise. I'm assuming you're using the overlay to make a modal dialog or some such - if you really wanted to, you could probably put the dialog inside the overlay div and use z-ordering to make sure your dialog stays above. Or you could use jQuery to insert the div on the fly, as is mentioned in the question you linked to:

$('div.parent').append('<div class="child" />');