1. Top
  2. CSS
  3. position

CSS - position

position

解説

エレメントの位置を指定する。初期値はstatic、すなわち特別な位置決めをせず、HTMLの規則に従って配置される。

構文

{ position: absolute | relative | static}

注意事項

absoluteで配置されたエレメントは、次に配置されている親エレメント、あるいはそれが無いときにはBODYを基準とした相対座標で配置される。leftおよびtopは、階層上で次に配置されるエレメントの左上隅を原点とする相対的なものである。

この属性は継承されない。

ドキュメントの左上隅に画像を配置するには、この属性を0に設定します。

<IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">

absoluteを指定して配置すると、通常の配置とは関係なく自由なところに配置できる。もし、配置しようとする位置に他のエレメントがあった場合にでもそれには全く影響を与えず、逆にそのエレメントも配置しようとするエレメントに対して影響を与えない。結果的には同じ位置に配置されたエレメントは重ね合わされることになる。この重ねあわせの順序はz-indexによって調整することができる。

relativeを指定すると、本来配置されるべき位置からの相対座標で配置される。このときオフセットは前のエレメントの位置を基準にしている。たとえば、relativeである段落内の一部のテキストをrelativeで配置する場合には、そのテキストの直前のテキストからの相対座標で配置される。

<p>The superscript in this name<SPAN STYLE="position: relative; top:-3px">xyz</SPAN> is "xyz".

relativeで配置されたテキストとエレメントは、それ自身の場所を確保し、何も制御されないで配置されているテキストとの重ね合わせは起こらない。配置されたテキストやエレメントの後に続くエレメントは本来表示されるべき場所に表示される。

エレメントはabsolute配置できるものとrelative配置できるものがあるので、適用の欄を参照すること。

ページの先頭へ

!important |  @font-face |  @import |  active |  background |  background-attachment |  background-color |  background-image |  background-position |  background-repeat |  border |  border-bottom |  border-bottom-color |  border-bottom-style |  border-bottom-width |  border-color |  border-left |  border-left-color |  border-left-style |  border-left-width |  border-right |  border-right-color |  border-right-style |  border-right-width |  border-style |  border-top |  border-top-color |  border-top-style |  border-top-width |  border-width |  clear |  clip |  color |  cursor |  display |  filter |  float |  font |  font-family |  font-size |  font-style |  font-variant |  font-weight |  height |  hover |  left |  letter-spacing |  line-height |  link |  list-style |  list-style-image |  list-style-position |  list-style-type |  margin |  margin-bottom |  margin-left |  margin-right |  margin-top |  overflow |  padding |  padding-bottom |  padding-left |  padding-right |  padding-top |  page-break-after |  page-break-before |  position |  text-align |  text-decoration |  text-indent |  text-transform |  top |  vertical-align |  visibility |  visited |  width |  z-index |