# Overlapping Elements on Top of Each Other! **URL:** \ **Category:** random\ **Created:** [April 16, 2023, 3:57am UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219 "2023-04-16T03:57:16Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 16, 2023, 3:57am UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/1 "2023-04-16T03:57:16Z")
My latest article is up! It’s a CSS one this time 🙂 > **[Overlapping Elements on Top of Each Other](https://www.kirupa.com/css/overlapping_items.htm)** > > Overlapping elements using CSS is no longer the stuff of nightmares. We'll look at how to do this elegantly by using the CSS grid. ---
**Author:** ![Gary\_D\_souza](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gary_d_souza/32/21605_2.png) [@Gary\_D\_souza](https://forum.kirupa.com/u/Gary_D_souza)\ **Post date:** [April 18, 2023, 10:41am UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/2 "2023-04-18T10:41:08Z")
Hi Kirupa - Can you please make the planet rotating as well or advice on that? Thanks. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 18, 2023, 1:50pm UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/3 "2023-04-18T13:50:17Z")
Hi @Gary_D_souza - it depends! How do you want the planet to rotate? If you want it to rotate horizontally or vertically, that can be done with little effort. If you want the rotation to look more realistic where the internal design of the planet is rotating similar to how you see videos of earth from outer space, that becomes a bit trickier 😀 Cheers, Kirupa ---
**Author:** ![Gary\_D\_souza](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gary_d_souza/32/21605_2.png) [@Gary\_D\_souza](https://forum.kirupa.com/u/Gary_D_souza)\ **Post date:** [April 20, 2023, 5:09pm UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/4 "2023-04-20T17:09:07Z")
Thanks for your response @kirupa . I would say rotating at a tilted angle? 🙂 ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 21, 2023, 3:36am UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/5 "2023-04-21T03:36:28Z")
Can you give me an example (like a YouTube video) of what a planet rotating on a tilted angle should look like? That will give me a better idea of how to apply it to what you are trying to do 🙂 ---
**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\ **Post date:** [April 21, 2023, 4:51am UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/6 "2023-04-21T04:51:14Z")
Here’s an example of the realistic version, first one only works in chrome, second both… [https://codepen.io/donovanh/pen/kQgMmE](https://codepen.io/donovanh/pen/kQgMmE) [https://codepen.io/chinchang/pen/ngOBpx](https://codepen.io/chinchang/pen/ngOBpx) …the basic idea is create a mask of a circle and then animate its background scrolling to the right. To get the angled look to match the example here couldn’t you transform rotate the background 45 deg after the scroll (might need another div)? I couldn’t get it to work in 2 minutes so gave up. I cant think at the moment as I’m giving up smoking and going through hell with my neighbors and landlord, sorry. ---
**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\ **Post date:** [June 9, 2023, 6:53pm UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/7 "2023-06-09T18:53:15Z")
If you want to get extreme… [https://twitter.com/anatudor/status/1664346960017367044](https://twitter.com/anatudor/status/1664346960017367044) Makes me think if you knew trig (I sure dont) couldnt you make an svg displacement map to do the same sorta thing? ---
**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\ **Post date:** [June 10, 2023, 1:21am UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/8 "2023-06-10T01:21:51Z")
Ana Tudor is an absolute genius. I think she might even be on the SVG working group… ---
**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\ **Post date:** [June 10, 2023, 1:20pm UTC](https://forum.kirupa.com/t/overlapping-elements-on-top-of-each-other/658219/9 "2023-06-10T13:20:45Z")
She sure is, she also a really nice person. She and a bit from Sara Soueidan helped me get my head around the 3d css stuff. Got to love those smart people that get hyper focused on one thing and share all they know with others, giving their time for personal help, and reporting ever error they encounter…absolute gems.