2015年5月28日木曜日

特定の画像上に、相対的に何か要素を配置したい場合

<div class="relative">
<img src="test.jpg">
<div class="absolute">
<table>
~
</table>
</div>
</div>


.relative{
  position: relative;
  width: 500px;
  margin: 0px auto;
}
.absolute{
  position: absolute;
  top: 100px;
  left: 100px;
}


これでテーブルが置かれる場所は、画面トップから100px、左から100pxではなく、
test.jpg 画像のトップから100px、左から100pxとなる。

0 件のコメント: