CSS3で要素を移動したい場合は下記のように記述します。


index.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>

<link href="stylesheet.css" rel="stylesheet"/>

</head>
<body>

<div id="sample">
<div id="translate">
<h1>sample</h1>
</div>
</div>

</body>
</html>


stylesheet.css


#sample {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#translate {
transform: translate(0,200px);
}


index.htmlを実行すると下記のようにブラウザで表示されます。

CSS3_006_02

移動位置を変更:


#translate {
transform: translate(100px,100px);
}





book


Q&A