正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead!

Wes Bos

436,062 subscribers

302,109 次观看 • 1 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 条评论

Wes Bos 的头像

Wes Bos1 年前

Second video! Your questions + tips

Bruno Stasse 的头像

Bruno Stasse1 年前

And you can make it more concise with grid-area: 1 / 1;

Wes Bos 的头像

Wes Bos1 年前

👌😮‍💨 even better

trash 的头像

trash1 年前

i’m using absolute like i’m coding in the stone ages

Wes Bos 的头像

Wes Bos1 年前

absolute: chad;

James Landrum 的头像

James Landrum1 年前

It’s a hack but a hack that I love. And one that technically the layout engine is purposely written to support.

Wes Bos 的头像

Wes Bos1 年前

hah yeah, I'm not sure I'd even call it a hack - its a feature of CSS grid to have multiple items on grid rows/cols

Caleb Porzio 的头像

Caleb Porzio1 年前

My guy, this is fantastic

Wes Bos 的头像

Wes Bos1 年前

thanks my guy!

Alex Parra 的头像

Alex Parra1 年前

Cool demo! I dreamt of this back in 2017 And in 2020 posted it was possible with grid. There’s likely updates I need to make to that posts.

Wes Bos 的头像

Wes Bos1 年前

Awesome! I also included it in my course back then too. Just re-surfacing as I still don't see it used a ton

相关视频

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Jess Chan | Coder Coder

11,606 次观看 • 2 个月前

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

128,603 次观看 • 6 个月前

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 次观看 • 2 年前

Is this a hack? What about stack order? Fine grain control? A few more tips on using CSS Grid instead of absolute positioning. I really like the named grid area one!

Is this a hack? What about stack order? Fine grain control? A few more tips on using CSS Grid instead of absolute positioning. I really like the named grid area one!

Wes Bos

103,877 次观看 • 1 年前

New timeline component pushes CSS grid to its absolute limit 🥵

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

151,274 次观看 • 4 个月前

Protip: if you want to understand why more elements paint than expected (to compare rendering libraries, for example), you can use the Layer tool inspect it. hint: it's css, not javascript

Protip: if you want to understand why more elements paint than expected (to compare rendering libraries, for example), you can use the Layer tool inspect it. hint: it's css, not javascript

Ricky

29,251 次观看 • 3 个月前

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

Updated my SVG-to-CSS converter to support multiple path elements. An easy way to convert complex SVG shapes into CSS. It's a single-element implementation with a single shape() value! You can also have the border-only version using border-shape.

CSS by T. Afif

15,196 次观看 • 2 个月前

Spoiler: It's a stack of empty elements using CSS backdrop-filter: blur() with varying strengths/mask 🤙

Spoiler: It's a stack of empty elements using CSS backdrop-filter: blur() with varying strengths/mask 🤙

jhey ʕ•ᴥ•ʔ

275,529 次观看 • 2 年前

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

you can do this one with css grid, position: sticky, and some scroll animation 👨‍🍳

jhey ʕ•ᴥ•ʔ

207,108 次观看 • 7 个月前

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

80,298 次观看 • 2 年前

Are you using AI to think better or to avoid thinking? Many use AI to outsource their thinking. It's fast. It's easy. It feels productive. But it will quietly hollow you out. There's a better path, Jim VandeHei argues.

Are you using AI to think better or to avoid thinking? Many use AI to outsource their thinking. It's fast. It's easy. It feels productive. But it will quietly hollow you out. There's a better path, Jim VandeHei argues.

Axios

13,842 次观看 • 1 个月前

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,404 次观看 • 2 年前

CSS Position It's easier to learn something when it is animated.

CSS Position It's easier to learn something when it is animated.

Ali Reza

139,872 次观看 • 3 年前

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

jhey ʕ•ᴥ•ʔ

117,444 次观看 • 1 年前

🚨 Looking for the best guns & cyberlimbs to use in Off The Grid? Here are the top 4 META Loadouts the pro's use to win 10x more games. What loadout are YOU using?

🚨 Looking for the best guns & cyberlimbs to use in Off The Grid? Here are the top 4 META Loadouts the pro's use to win 10x more games. What loadout are YOU using?

'Stache

11,162 次观看 • 1 年前

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

507,606 次观看 • 2 年前

Indonesia, i need you to stop using whatsapp and use LINE instead 😭 I want to use this so bad legally

Indonesia, i need you to stop using whatsapp and use LINE instead 😭 I want to use this so bad legally

acha 🍦

17,831 次观看 • 3 个月前

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

114,785 次观看 • 8 个月前

Now here are the better banks in 2026! See if you are using them instead!?

Now here are the better banks in 2026! See if you are using them instead!?

Kathleen Winchell ❤️🤍💙🇺🇸🇺🇸

45,356 次观看 • 3 个月前