-1

I am making a basic chatting app. The information of the person you are texting is on the top of the screen

.rectangle-section {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    background-color: #1e1e1e;
    height: 100px;
}

I also have a few messages visible on the screen. I want to make it so that when the person is scrolling up, the messages dont appear above the information about the person you are messaging like this. How do I do that?

lohannnnnnnnnnnnnnnnnnnnnnnnnn
  • 1
  • Honestly, I wouldn't mess with z-indexes etc. Instead, just make a container div for your messages and have it set to `overflow: auto;`. So basically a header with user info and a container for the messages underneath. Then keep the messages inside the container instead of trying to make the header float on top of the messages – icecub Sep 05 '22 at 07:33
  • You can find an example of what I mean here: https://jsfiddle.net/r23qbefu/ – icecub Sep 05 '22 at 07:38

1 Answers1

0

You need position:fixed for the section with the information, and also give it a higher z-index than that of the messages. For example:

.rectangle-section {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1; 
    background-color: #1e1e1e;
    height: 100px;
}
moy2010
  • 854
  • 12
  • 18