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

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

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

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

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …