z-indexをつかって要素の順番を変えていたのですが、どうにも思った通りにいかないことがありました。 今回はそんなハマったパターンになります。 親子関係になっているタグで親要素に z-index: auto 以外の値を指定した場合 <html> <head> <title></title> <style type="text/css"> .parent { padding-top: 20px; padding-left: 20px; width: 100px; height: 100px; background-color: #ff0000; position: relative; z-index: 2; } .child { width: 100px; height: 100px; background-color: #ff9999; position: absolute; top: