MW211 EXIT

devlog
CSS/複数背景画像(3)z-index
2014年03月23日
「z-index」が低め(他を高くする)の「img」タグを、
「position:fixed;」で固定表示するという回避策もある。

但し、「position:fixed;」は「position:absolute;」と違って、
親を持つことができない。

よって、センタリングした領域とかに配置するのは難しい。
こんな感じになる。
┌──────────────────────────────────────┐
│div {                                                                       │
│    position            :relative;                                          │
│    width               :640px;     /* ① */                                │
│    margin              :auto;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│img.left {                                                                  │
│    position            :fixed;                                             │
│    top                 :50%;       /* 全体の中央を基準とする */            │
│    left                :50%;       /* 全体の中央を基準とする */            │
│    height              :64px;      /* ② */                                │
│    width               :64px;      /* ③ */                                │
│    margin-top          :-32px;     /* ②÷2 */                             │
│    margin-left         :-320px;    /* ①÷2(※③÷2でないのがミソ) */      │
│    z-index             :1;         /* できるだけ背面に表示 */              │
│}                                                                           │
│img.right {                                                                 │
│    position            :fixed;                                             │
│    top                 :50%;       /* 全体の中央を基準とする */            │
│    right               :50%;       /* 全体の中央を基準とする */            │
│    height              :64px;      /* ② */                                │
│    width               :64px;      /* ③ */                                │
│    margin-top          :-32px;     /* ②÷2 */                             │
│    margin-right        :-320px;    /* ①÷2(※③÷2でないのがミソ) */      │
│    z-index             :1;         /* できるだけ背面に表示 */              │
│}                                                                           │
└──────────────────────────────────────┘
分類:CSS