skillup

技術ブログ

デザイン 未分類

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

投稿日:

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

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

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

no image

HTML5について

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

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …