flexbox div中的绝对div行为像固定的

问题描述

我正在设计一个关于react的响应式聊天页面视图，并且正在努力解决以下问题。

我有一个绝对位置的div菜单，单击菜单按钮时，该菜单显示在所有元素的顶部，如您在此处看到的：

一切似乎都正常，即使我将屏幕调整为电话尺寸时，它也可以按预期显示，因为我有一个媒体查询，该查询修改了left属性以适合我想要的div。但是在电话视图中，当我滚动页面时，div沿着屏幕在其偏移位置移动，而我无法修复它：

据我所知，这种行为与固定位置相对应，我了解到，如果我采用绝对位置，则div应该留在他的位置上。但是我不知道这里发生了什么。也许是搞砸了，因为我正在使用flex（所有东西都通过flex的“方向”属性来排列元素）。

这是我的JSX代码：

return (
    <div id="chat-page-main-container" onClick={onMainContainerClick}>
      <div id="chat-main-menu-select" style={{ display: displayMenu }}>
        <ul className="list-group">
          <li className="list-group-item">Profile</li>
          <li className="list-group-item">Create new group</li>
          <li className="list-group-item">Log out</li>
        </ul>
      </div>

      <div id="chat-left-side-content">
        <div id="chat-main-menu">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/e/e8/The_Joker_at_Wax_Museum_Plus.jpg"
            alt="unavailable"
          />
          <div id="chat-main-menu-options">
            <div className="main-menu-options-icons">
              <i id="chat-comment-icon" className="fa fa-comments"></i>
            </div>
            <div
              className="main-menu-options-icons"
              style={{ backgroundColor: selectedItem }}
            >
              <i
                id="chat-menu-icon"
                className="fa fa-bars"
                onClick={onMenuIconClick}
              ></i>
            </div>
          </div>
        </div>
        <div id="search-conversation-bar">
          <i className="fa fa-search"></i>
          <input type="text" placeholder="Search for a conversation" />
        </div>
        <div id="chats-component-container">
          {data.map((object,index) => (
            <ChatCard key={index} data={object} />
          ))}
        </div>
      </div>

      <div id="chat-right-side-content">
        <div id="conversation-splash-screen">
          <img src={conversationImage} alt="unavailable" />
          <h3>Welcome to tellit chat page!</h3>
          <p>
            You can search for a contact or a conversation on the left menu.
          </p>
        </div>
      </div>
    </div>
  );

这是我的SASS代码：

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: whitesmoke;
}

::-webkit-scrollbar-thumb {
    background: #bababa;
}

#chat-page-main-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow-x: auto;
    white-space: Nowrap;

    #chat-main-menu-select {
        position: absolute;
        top: 4em;
        left: 12em;

        ul {
            border-radius: 5px;
            cursor: pointer;
        }

        li:hover {
            background-color: #ededed;
        }
    }

    #chat-left-side-content {
        display: flex;
        flex-direction: column;
        min-width: 400px;
        height: 100%;
        border-right: solid 1px #bababa;

        #chat-main-menu {
            width: 100%;
            height: 71px;
            padding: 10px 25px;
            border-bottom: solid 1px #bababa;
            background-color: #EDEDED;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                float: left;
            }

            #chat-main-menu-options {
                display: flex;
                flex-direction: row;
                float: right;
                height: 100%;
                padding-top: 5px;

                .main-menu-options-icons {
                    font-size: 25px;
                    opacity: 0.5;
                    text-align: center;
                    width: 40px;
                    border-radius: 50%;
                    margin: 0 10px;

                    i {
                        cursor: pointer;
                    }
                }
            }
        }

        #search-conversation-bar {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
            background-color: #EDEDED;
            padding: 10px 0;
            border-bottom: solid 1px #bababa;

            input {
                border-radius: 30px;
                border: none;
                width: 85%;
                height: 40px;
                font-family: "Segoe UI";
                font-size: 13px;
                padding: 0 43px;

                &:focus {
                    outline: none;
                }
            }

            i {
                font-size: 20px;
                position: relative;
                left: 30px;
                top: 10px;
            }
        }

        #chats-component-container {
            overflow-y: auto;
            overflow-x: hidden;
        }
    }

    #chat-right-side-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: white;

        #conversation-splash-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 5em;

            img {
                width: 30em;
                height: 30em;
            }
        }
    }
}

@media (max-width: 500px) {
    #chat-left-side-content {
        min-width: 300px !important;
    }

    #chat-right-side-content {
        min-width: 600px !important;

        #conversation-splash-screen {
            padding-top: 3em !important;
        }
    }

    #chat-main-menu-select {
        left: 6em !important;
    }
}

我要补充的另一个事实是，我也尝试将绝对位置更改为相对位置，但这最后使容器div混乱，显示了空白或内部元素的重新排列。

欢迎任何建议或代码更正。谢谢。

解决方法

设置位置：父级的相对位置（＃chat-page-main-container）