positionプロパティ-相対、絶対、fixed

26067 ワード
fixed absolute position relative static テキストリンク

position Property

  • Position Propertyは、htmlコードに関係なく、表示したい場所で要素を表すことができます.
  • の位置で使用される値は、静的、相対的、絶対的、固定的の4つです.

    • static position

  • 単独で位置を設定しない場合は、基本的に位置:静的です.静的とは「静的」を意味する.

    • 👉 例


    💻 html
    <html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='out_box'>
    <div class='in_box'>static position</div>
  </div>
</body>
    💻 css
    .out_box {
  background-color: greenyellow;
  width: 400px;
  height: 400px;
  position: static;
  margin: 30px auto;

}

.in_box {
  background-color: red;
  width: 200px;
  height: 200px;
  position: static;
}
    👀 結果

    relative position

  • 位置:相対的な意味は「相対的」です.
  • top:50 pxは「現在の位置から50 pxのスペースをください」という意味です.
  • 左:30 pxは「現在位置から30 pxの左側の空間をください」を表しています.

    • 👉 例


    💻 html
    <!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='out_box'>
    <div class='in_box'>relative position</div>
  </div>
</body>
    💻 css
    .out_box {
  background-color: greenyellow;
  width: 400px;
  height: 400px;
  position: static;
  margin: 30px auto;

}

.in_box {
  background-color: red;
  width: 200px;
  height: 200px;
  position: relative;
  top: 50px;
  left: 30px;
}
    👀 結果

    absolute position

  • absoluteは「絶対」という意味で、特定の親に対して絶対的な行動をとる.
  • ここでは、親の地位は相対的で、固定的で、絶対的でなければ機能しない.
  • absoluteが一般的に使用される場合、標準的な親としての位置は相対的である.
  • bottom:50 px値は「自分の親を基準にして、一番下の50 px間隔を与える」ことを示しています.
  • right:30 px値は「自分の親を基準にして、一番右側に30 px間隔を与える」という意味です.

    • 👉 例


    💻 html
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='out_box'>
    relative position
    <div class='in_box'>absolute position</div>
  </div>
</body> 
</html>
    💻 css
    .out_box {
  background-color: greenyellow;
  width: 400px;
  height: 400px;
  position: relative;
  margin: 30px auto;

}

.in_box {
  background-color: red;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 50px;
  right: 30px;
}
    👀 結果

    fixed position

  • fixedは、ブラウザ画面を基準に移動する「確定」、「固定」を意味します.
  • 他のhtmlとはまったく関係なく、ブラウザ画面の基準の「固定」位置にスクロールできます.
  • top: 0; right: 0;スクリーンブラウザの水平に、ずっと右上にあります.

    • 👉 例


    💻 html
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class='out_box'>
    relative position
    <div class='in_box'>absolute position</div>
  </div>

  <div class='fixed_box'>
    fixed position
  </div>
</body> 
</html>
    💻 css
    .out_box {
  background-color: greenyellow;
  width: 400px;
  height: 400px;
  position: relative;
  margin: 30px auto;

}

.in_box {
  background-color: red;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 50px;
  right: 30px;
}

.fixed_box {
  background-color: skyblue;
  width: 100px;
  height: 70px;
  position: fixed;
  top: 0;
  right: 0;
}
    👀 結果

    LiveDataとViewModelの完璧な組み合わせで、魅力を感じましょう
    Activity再構築時にFragment状態を保つ方法