やっぱりフロントは難しい(＞人＜;)
思っているいる位置に全然配置できない
こんな感じにテキストボックス内にアイコンをカッコよく配置しようとしたのですが、
全然うまく行かない(￣ ￣)
めっちゃ苦戦した末になんとかできました。
その中で学んだCSSのpositionプロパティについて記載します。
position
表示位置を指定するプロパティ
設定できるプロパティ値は、「top」「left」「bottom」「right」になります。
指定した位置に配置したい要素を置く事ができます。
イメージとしてはこんな感じです。
position: relative;
position属性に、relative属性値を設定してあげると、
相対位置の指定をしてあげる事ができます。
配置されている位置を基準に、移動位置を指定してあげる事ができます。
hoge.css
test{position:relative;top:10px;}図で書くとこんな感じです。
position: absolute
position属性に、absolute属性値を設定してあげると、
表示位置を親要素を基準に絶対位置を指定できます。
positionにrelative、absolute、fixedのいずれかが指定してある、
一番近い親要素を基準として位置が設定されます。
こいつが結構厄介で、初期の設定では親要素の絶対位置が設定されているため、
親要素の左上に吸い寄せられます。（重力的な感じかな）
自分たちの日常で上からの重力が働いているため地面を歩けます。
html、cssの要素にも何も設定していないと重力的なものが働き、左上に必ず設置されますねよ。
そんな感じのものがこのプロパティ値だと思っています。（曖昧ですいません）
また、親要素の事を基準要素と呼びます。
図で書くとこんな感じかなと
結構曖昧な事ばかり書いているようで申し訳ありません。
間違っている箇所がありましたら、ご指摘をお願い致します。