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

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-5 …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5ae227b2f3 …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …