概要
CSSプロパティ｢left｣は、要素の配置方法を設定するプロパティ position でstatic以外の値を指定した際に、その要素の基準位置の左からの距離を指定します。
幅300px,高さ200pxの要素の中でleft: 10px;を指定しているので、左端が左から10pxの距離のところに表示されました。
<div>
<p class="left">left：10pxを指定した要素</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 200px;
border: 1px solid #000;
background-color: #dee;
position: relative;
}
p {
border: 1px solid #000;
background-color: #def;
width: 280px;
position: absolute;
}
.left {
left: 10px;
}
</style>この位置指定の種類をまとめると以下の４つになります。基本的には、上下と左右をそれぞれ１つづつ指定することになります。
- 上からの距離：top
- 左からの距離：left
- 下からの距離：bottom
- 右からの距離：right
値
| 値 | 説明 |
|---|---|
| length | pxやem, パーセント。マイナス値の指定可能 |
| auto | 初期値。自動的に設定されます。 |
使用例
画面の左右に配置されるページングを表示させてみます。これは画像のあるdiv要素を基準点として｢前へ｣には left プロパティを、 ｢次へ｣には right プロパティを指定してあげます。
<div>
<p>左右にページングを配置します</p>
<ul>
<li class="absolute left">< 前へ</li>
<li class="absolute right">次へ ></li>
</ul>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 200px;
border: 1px solid #000;
position: relative;
background: url('https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg') no-repeat 0 0;
background-size: cover;
text-align: center;
}
li {
text-align: center;
width: 50px;
height: 28px;
list-style: none;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 4px;
padding: 5px;
}
.absolute {
position: absolute;
top: 50%;
margin-top: -14px;
}
.left {
left: 5px;
}
.right {
right: 5px;
}
</style>