多选下拉菜单与我的表格重叠，我希望下拉菜单将表格向下推

Question

我遇到了一个问题，即多选下拉列表与我的 Web 应用程序中的表格重叠。尽管尝试了各种 CSS 调整并操作 z-index，问题仍然存在。

我的CSS文件：

.content-container {
    margin: 20px;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.dropdown-container {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}


.multiselect-component .multiselect-dropdown {
    border: 1px solid #ccc;
    border-radius: 4px;
}


.scrollable-table {
    max-height: 600px; /* Adjust based on your requirement */
    overflow-y: auto;
    margin-top: 20px;
    display: block;
    position: relative;
}

table {
    width: 100%;
    border-collapse: collapse;
    overflow: visible;
}

thead.thead-dark {
    background-color: #343a40;
    color: #ffffff;
}

th,
td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Button Styles */
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

我的js文件的一部分：

<div className="scrollable-table">
            <div className="content-container">
                <div className="dropdown-container">
                    <Multiselect
                        options={events}
                        selectedValues={selectedEventsForMultiselect}
                        onSelect={onSelectedEventsChange}
                        onRemove={onSelectedEventsChange}
                        displayValue="name"
                        showCheckbox={true}
                        onFocus={toggleDropdown}
                        onBlur={toggleDropdown}
                        className="multiselect-component"
                    />
                </div>
                <div style={{ marginTop: isDropdownActive ? "200px" : "20px" }}>
                    <button onClick={handleDisplayStudentsClick}>Display Students</button>

                    <h2>Total Students: {students.length}</h2>

                    <table className="table-text-small">
                        <thead className="thead-dark">

我尝试更改 z-index 值和边距。什么都不起作用。非常感谢任何帮助

Answer 1

根据您提供的信息，您似乎正在使用外部库，并且要向其中添加其他自定义样式，您必须将

!important

添加到CSS文件中的CSS属性中。

看这个例子：

.multiselect-component {
    border: 1px solid blue !important;
}