トップページの中の プロパティの中の Lのプロパティ一覧の中の left

left

  • 最終更新:2009年11月 8日 15:58

leftプロパティは、位置指定されている要素(positionプロパティの値がstatic以外の要素)を左辺からどの位置に配置するかを指定します。
その為、単体で使用する事は無く、positionプロパティと併せて使用します。

尚、rightプロパティと競合した場合は、rightプロパティの指定が無視されます。(書字方向が左から右(ltr)の場合)

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

<パーセント>|<長さ>|auto|inherit
初期値
auto
適用される要素
位置指定されている要素
継承
しません
パーセント値
包含ブロックの横幅に対する割合
メディア
visual

leftのサンプル

.item {
  position: relative;
  height: 100px;
  margin: 30px 10px;
  background: #333;
}

.item img {
  position: absolute;
  left: 10px;
}
<div class="item">
<img src="/img/bnr/css-happylife.gif" alt="CSS HappyLife" />
</div>

.itemを基点にして、img要素を左辺から10pxの位置に表示しています。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
CSS HappyLife

このページの上部へ