Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

position

やっぱりフロントは難しい(>人<;)
思っているいる位置に全然配置できない
スクリーンショット 2020-06-25 3.03.19.png
こんな感じにテキストボックス内にアイコンをカッコよく配置しようとしたのですが、
全然うまく行かない( ̄  ̄)
めっちゃ苦戦した末になんとかできました。
その中で学んだCSSのpositionプロパティについて記載します。

position

表示位置を指定するプロパティ
設定できるプロパティ値は、「top」 「left」 「bottom」 「right」になります。
指定した位置に配置したい要素を置く事ができます。スクリーンショット 2020-06-25 3.38.24.png
イメージとしてはこんな感じです。

position: relative;

position属性に、relative属性値を設定してあげると、
相対位置の指定をしてあげる事ができます。
配置されている位置を基準に、移動位置を指定してあげる事ができます。

hoge.css
        test{
              position: relative;
              top: 10px;
            }

図で書くとこんな感じです。
スクリーンショット 2020-06-25 3.54.27.png

position: absolute

position属性に、absolute属性値を設定してあげると、
表示位置を親要素を基準に絶対位置を指定できます。
positionにrelative、absolute、fixedのいずれかが指定してある、
一番近い親要素を基準として位置が設定されます。
こいつが結構厄介で、初期の設定では親要素の絶対位置が設定されているため、
親要素の左上に吸い寄せられます。(重力的な感じかな)
自分たちの日常で上からの重力が働いているため地面を歩けます。
html、cssの要素にも何も設定していないと重力的なものが働き、左上に必ず設置されますねよ。
そんな感じのものがこのプロパティ値だと思っています。(曖昧ですいません)
また、親要素の事を基準要素と呼びます。
図で書くとこんな感じかなと
スクリーンショット 2020-06-25 4.29.59.png

結構曖昧な事ばかり書いているようで申し訳ありません。
間違っている箇所がありましたら、ご指摘をお願い致します。

kh250
元お肉屋さんの プログラマー駆け出しの30才です。 javaとRailsを勉強していますが、わからん事だらけで、 備忘録のために投稿してます。 間違いが多々あると思いますが、間違いがありましたら、 ご教授頂ければ幸いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away