レイアウト-1.position

6431 ワード
CSS テキストリンク

position


デフォルトでは、htmlタグの順に画面を上から下、左から右に整理します.ただし、位置を指定したい場合があり、右下に貼られた上向きボタンのようです.

1. relative

position: relativeは単独では使用せず、top、bottom、left、rightとともに使用される.今の位置からこんなに移動するという意味ですね~
HTML
<html>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>
</html>
CSS
div {
  width: 50px;
  height: 50px;
  background-color: red;
  border: 1px solid black;
  margin-bottom: 10px;
}

今では3つの箱が一直線に立っている.
親戚を利用して真ん中の箱を移動します.
.box2 {
  position: relative;
  left: 50px;
}

乾杯
このほか、親族はposition: absoluteの基準としてよく使われている.

2. absolute


absoluteは、親ラベルにposition: staticでないものがある場合は、それを基準に移動します.
positionのデフォルト値はstaticなので、親ラベルにpositionが指定されていない場合はbodyに準じます.
箱を2つ用意しました.

順番に上下に並ぶ様子.
私は下の箱に絶対的にあげて、彼らに相対的に、緑の箱を両親にします.
.box1 {
  position: relative;    
  width: 100px;
  height: 100px;
  background-color: rgba(1,100,1,0.5)
}

.box2 {
  position: absolute;
  top: 0;
  width: 150px;
  height: 50px;
  background-color: rgba(100,1,1,0.5) 
}
top: 0をあげて、親の上に密着しました.

3. fixed


固定もtop,bottom,right,leftとともに書き,ブラウザ画面を基準に移動する.top: 0であれば、ブラウザの上をスクロールしても移動しません.
ActionBarの基本的な概要
ansible-playbookユーザーを一括作成しsudo権限を構成