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

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

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

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

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

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

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