How to implement fixed positioning relative to a specified parent element

the traditional position: fixed; is relative to the window, and there are two main points of the problem

.
  • relative to the specified parent element
  • fixed positioning

encountered the following problems in mobile development. The green box is the H5 navigation header, the blue box is the tab switch, and the red box is a long list display. Both the green box and the blue box need to be fixed, so how to make the blue box element fixed relative to the red box element? (of course, it is easy to think of changing the top value of the blue box, but I don"t think it is good. I hope to achieve the fixed positioning of the enhanced version.)

clipboard.png

Feb.26,2021

position:sticky


think differently. The top of the red box is immediately followed by the bottom of the blue box, and the red box overflow-y, green and blue boxes do not need position. (for example, http://wxgame.vuggame.com/html/ mobile environment)


can be done in another way, and it's good to use flex, mobile compatibility.

.wrapper {
    display:flex;
    flex-direction: column;
}
header {
    flex:none;
}
.content__wrapper {
    display:flex;
    flex-direction: column;
}
.content__header {
    flex:none;
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c1a131-331cb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c1a131-331cb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?