正在加载视频...

视频加载失败

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

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

Wes Bos

437,262 subscribers

302,188 次观看 • 2 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 条评论

Wes Bos 的头像

Wes Bos2 年前

Second video! Your questions + tips

Bruno Stasse 的头像

Bruno Stasse2 年前

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

Wes Bos 的头像

Wes Bos2 年前

👌😮‍💨 even better

trash 的头像

trash2 年前

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

Wes Bos 的头像

Wes Bos2 年前

absolute: chad;

James Landrum 的头像

James Landrum2 年前

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 Bos2 年前

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 Porzio2 年前

My guy, this is fantastic

Wes Bos 的头像

Wes Bos2 年前

thanks my guy!

Alex Parra 的头像

Alex Parra2 年前

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 Bos2 年前

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,843 次观看 • 4 个月前

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,963 次观看 • 9 个月前

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 次观看 • 3 年前

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,902 次观看 • 2 年前

New timeline component pushes CSS grid to its absolute limit 🥵

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

151,852 次观看 • 6 个月前

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 次观看 • 5 个月前

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 次观看 • 5 个月前

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,974 次观看 • 3 个月前

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,948 次观看 • 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,591 次观看 • 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,167 次观看 • 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,746 次观看 • 3 年前

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 次观看 • 5 个月前

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 次观看 • 6 个月前

Twitter UI is a beast to style. Responsive is still rough, ended up using grid for the 3 main columns. Using Tailwind CSS and Next JS for components. Will deploy to Vercel when ready

Twitter UI is a beast to style. Responsive is still rough, ended up using grid for the 3 main columns. Using Tailwind CSS and Next JS for components. Will deploy to Vercel when ready

Roy Quilor

65,130 次观看 • 3 年前

Use CSS Grid to stack items, and visibility: hidden to hide/show spinner. This approach allows the largest item to size the button, and keeps the button text accessible

Use CSS Grid to stack items, and visibility: hidden to hide/show spinner. This approach allows the largest item to size the button, and keeps the button text accessible

Wes Bos

177,171 次观看 • 1 年前

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

Simon Vrachliotis

127,870 次观看 • 3 年前