モダンCSSによる絶対配置（position: absolute;）の削減

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス

[coliss]

モダンCSSによる絶対配置（position: absolute;）の削減。

[gyochan]

もっと合理的に書ける方法があるなら代替すればいいし、絶対配置のほうが合理的なら引き続きそうすればいいと思う（がんばって減らさなきゃいけないものじゃない）。自分はどっちかいうと float の使用頻度が激減した

[flirt774]

position:absolute は z-index の問題が起きやすいかも。追従メニュー増えてきたので、追従メニューよりも上に重なったのを見るとあぁって思う

[spark7]

重ねるような用途ではgrid使いたくないな。absoluteより可読性落ちるだけでは。「grid-area: 1/2;」

[ogrenavi]

CSS Grid Layoutをabsolute的に使う解説。absoluteとどちらを使うかはケースバイケースといった感じ

[daiki0910]

position: absolute 使うときになったら再度読む

[Dragoonriders]

この手のショートハンドで短くできますって微妙。具体的に何をやっているか直截的でない記述は嫌いだ／まともにレイヤーが使えないwebって結局ディスプレイサイズの多様性を吸収する解のなさとかなんとかご苦労だな。

[charun]

>HTMLでは【テキスト→ボタン→画像】の順で書いてるのにCSSのdisplay: contents; で【テキスト→画像→ボタン】てレイアウトできる https://twitter.com/airi20712/status/1442731217258889224

[lifeisadog]

これはないな

[Cherenkov]

display grid layoutで重ねて表示

[UDONCHAN]

便利すぎる

[maruware]

gridで重ねるのもだいぶハック感がある

[ultimatebreak]

うーん直感的ではないかなあ

[nas444]

ふ

[adsty]

絶対配置を使用しなくても実装できるモダンCSSのテクニック。

[Pasta-K]

この前ちょうど、position: absolute使ってカードのオーバーレイ書いてたので、先に知りたかった……

[aox]

Faxで良いのでは ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ•̫͡•ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ

[renowan]

親のサイズが可変、flexのときはabsoluteを使いたくないのよ

[ttkazuma]

タイトル殺し。削減じゃなくて場合によって使い分けた方がよいという内容。

[topaz2]

display: grid, contents

[trashtoy]

箇条書きリスト (li) の行頭に任意の文字や画像を置きたくて :before セレクタを absolute 配置するのはよくやる

[yoshi-na]

①②③はposition:absolute;の方がなんか楽だな、display:grid;の方がモダンな実装ではあるが、メリットってなんだろう

[gyampy]

display grid