How do I create this 'floating' effect in material UI-CodePudding

as seen on this website: https://genhall.io/bestiary/

how do I create this text panel to the right that floats location between a point and a certain minimum distance from top of screen like that? If the implementation can be in Material UI and React as well but any CSS that could help is great as well.

CodePudding user response：

What you want to do is give your panel a unique class or ID, and then use position:fixed, and specify the distance to the top, bottom, left or right of the viewport, eg

.panel{
  position:fixed;
  right:50px;
  bottom:50px;
}

CodePudding user response：

You can do this using margins and position: fixed

yourClass
{
    position: fixed;
    margin-right: huge number; (play around with this)
    margin-top: huge number; (play around with this)
    margin-left: 10px; (or another small number to get it close to screen edge)
    margin-bottom: 10px;  (or another small number to get it close to screen edge)
}

position: fixed will ensure that the items in your div class stay "fixed" to their relative position on your screen regardless of how you scroll. Margins then determine their relative position from the edge of the screen (though it's easier to use right: and bottom: to directly assign your div class's position