skillup

技術ブログ

デザイン

positionを使うときに注意すること

投稿日:2018年3月17日 更新日:

positionを使ったときに色々なまとめ。

  • 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照)
  • position:absoluteの要素がインラインだとインラインの影響(例えばtext-align:center)を受ける可能性がある(ブラウザによる差異の影響を受ける)ので、display:blockにする。
  • absoluteだと親にpositionがなければ元々の基準位置(通常window)が基準になる。固定ヘッダーなどだとposition:fixedでも親とヘッダーが同一なので、関係ないかも。
  • 親がpositionでないblockで子がposition要素を持っていると親のoverflow:hiddenが効かない。親子がともにpositionなしか親子がともにposition持ちなら問題ない。(ソース参照)

参考リンク

ソース

https://github.com/umanari145/css/blob/master/position.html

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 Contents1 対策1 コンテンツの幅が10 …

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

アーカイブ