position 基準

今いろいろ改造していますが、absoluteの基準点がわかりません。親要素の左上とありますが私のコードだと
１番の基準点の左__から100px
上から__50pxという意味でしょうか？

帰納法（経験則）からわかってきましたが、親要素全体に基準面があり、左からとか上からとかになっているように思えます
リンク内容

css
1header img {
2  position: absolute;
3  left: 100px;
4  top: 50px;
5}

html
1k<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/normalize.css">
6  <link rel="stylesheet" href="css/font-awesome.min.css">
7  <link rel="stylesheet" href="css/styles.css">
8  <link rel="icon" href="favicon.ico">
9  <title>Dotinstall Pane</title>
10</head>
11<body>
12  <header>
13    <div class="container">
14      <p>
15        どっとインストールを見ながら<br>
16        コーディングができるAtomパッケージ
17      </p>
18      <h1>Dotinstall Pane</h1>
19      <a class="btn" href="#">詳細を見る <i class="fa fa-external-link" aria-hidden="true"></i></a>
20      <img src="img/top.png"
21      width="480" height="270"
22      alt-"Atomエディタ">
23
24    </div>
25
26  </header>
27
28</body>
29</html>

css
1@charset "utf-8";
2
3/*common*/
4
5body {
6margin: 0;
7font-size: 14px;
8font-family: Vernada, sans-serif;
9color: #333;
10}
11
12a {
13  text-decoration: none;
14}
15
16p {
17  line-height: 2;
18}
19
20.btn {
21  display: inline-block;
22  width: 290px;
23  line-height: 45px;
24  background: #fff;
25  text-align: center;
26  color: orange;
27  border-radius: 5px;
28  opacity: 0.9;
29}
30.btn:hover {
31  opacity: 1;
32}
33
34
35/* header */
36
37header {
38  background: url('../img/bg.png');
39  background-size: cover;
40}
41
42header .container {
43  width: 820px;
44  margin: 0 auto;
45  height: 320px;
46  padding-top: 10px;
47  position: relative;
48}
49
50header h1, header p {
51  color: white;
52}
53
54header p {
55  padding-top: 50px;
56}
57
58header h1 {
59  font-size: 34px;
60  margin-bottom: 50px;
61}
62
63header img {
64  position: absolute;
65  left: 100px;
66  top: 50px;
67}
68

Zuishin

2017/04/17 00:27 編集

人に教えてもらったのと同じ結果が出たのは帰納法とも経験則とも言いません。「css position absolute」で検索すればいくらでも情報は出てきます。そろそろ前進しましょう。自分でキーワードを指定して検索できるようになれば、少し前進したと言えるのではないですか？

goforward

2017/04/17 00:39 編集

はい、tryしてみます。

garchomp

2017/04/18 04:05

それと、個人的におすすめなのはProgate.中級編でばっちし出てきますよｂ

行動規範の内容に同意します

回答2件

個人的にわかりやすかったのは、たとえばabsoluteしたい要素をどこに配置するかによって、relativeを指定するところが変わってくると思います。

例えば

html
1
2<!DOCTYPE html>
3<html>
4<head>
5<title>HTML5, CSS3 and JavaScript demo</title>
6  <style>
7    *{
8      margin:0 auto;
9    }
10    header{
11      height:100px;
12      background-color:aqua;
13    }
14    .test{
15      height:200px;
16      width:200px;
17      position:relative;
18      background-color:orange
19    }
20    .test-in{
21      position:absolute;
22      left:50px;
23      background-color:red;
24      height:100px;
25      width:100px;
26    }
27  </style>
28</head>
29<body>
30  <header></header>
31  <div class="test">
32    <div class="test-in">
33      
34    </div>
35  </div>
36</body>
37</html>
38

こうすると、赤い箱がオレンジの箱の左上に来ているのが分かるかと思います。
ここからはご自身で手を動かしてみてほしいのですが、たとえばleft:50px;にすると、左から50pxずれて、親要素の全体の横幅が200pxなので
50px 100px 50px
という割合になり、真ん中に来たのが分かるかと思います。

また、上下も真ん中にしたいなら、同じようにtop:50px;にすると、ど真ん中に来るはずです。

こんかいのコードの部分で、testとtest-inのサイズやtop leftの指定をいろいろ変えて遊んでみてください。

なお、右下を基準にすることもでき、その場合はbottom,leftを10pxにすると赤井はこの右下から１０pxずつずれたのが分かるかと思います。

まとめると、

position:relative;はbosition:absoluteの親要素になり考え方を変えると、position:relativeは段ボール、position:absoluteは段ボールの中には言っている積み木ブロック

という解釈もできます。

他にもいろんな考え方がありますが、手を動かして慣れてみてください。

投稿2017/04/18 04:03

garchomp

総合スコア128