document全体をカバーするdivを考えて見る。一見すると以下のようなコードでいいような気がする。

#overlay {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,0.2);
}

しかし、bodyにposition:relativeがない限り、これがカバーするのはviewportであり、bodyではない。(Chrome,Safari,FireFox)

では、bodyにposition:relativeをすればいいのかというと、一般的な設定ではないので気がひける。

やはり、bodyにposition:relativeなしに、overlayする方法がのぞましい。