绝对 div 在 flexbox div 中表现得像固定的

Question

我正在为 React 设计响应式聊天页面视图，但遇到了以下问题。

我有一个带有绝对位置的 div 菜单，单击菜单按钮时它显示在所有元素的顶部，如下所示：

一切似乎都很好，即使我将屏幕大小调整为 phone 尺寸，它也按我预期的方式显示，因为我有一个媒体查询修改了左边的属性以适应 div我想要的地方。但是在 phone 视图中，当我滚动页面时 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 显示 space 空白或重新排列内部元素。

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

Answer 1

设置位置：相对于parent (#chat-page-main-container)

绝对 div 在 flexbox div 中表现得像固定的

Absolute div inside flexbox div behaving like fixed

html

frontend

sass

css-position

reactjs