css positon absolute和z index 10000不起作用，并干扰了z index为5的div，如何修复？[已关闭]

ioekq8ef 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(219)

- 已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
16小时前关门了。
Improve this question
我正在做一个静态网站时，我的div我正在扰乱我的侧边栏。
我查找了我的问题，大多数人说的修复是把位置元素和z索引放在一起，我这样做了，但它仍然不起作用。我开始调试，但发现即使是1000000000000 z索引也没有什么作用，如何修复？js仍然没有任何作用。
此处链接到完整winraw文件https://drive.google.com/file/d/1WPnJo87F538F-FzqGkVQlXDl7Jc_K567/view?usp=sharing
这是我代码
关于我的div部分把代码弄乱了

<body>
    <div id="body-protection-container">
        <div id="main-body-container">
            <!-- ------------------------------------------------- -->
            <!-- ------------------------------------------------- -->

            <div id="main-video-container">
                <video width="100%" height="100%" autoplay muted loop>
                    <source src="/videos/l0hfqo.mp4" type="video/mp4">
                </video>
            </div>

            <div id="main-content-div">
                <div id="app-container">
                    <div id="app-container-container">
                        <!-- --------side bar----------------- -->
                        <div id="sidebar-container">
                            <div id="photo-container">
                                <div id="photo-con-two">
                                    <div id="photo-circle-con">
                                        <div id="photo-circle-con-container">

                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--  -->
                            <div id="name-container">
                                <div id="name-con">
                                    <div id="con-name">
                                        S.G
                                    </div>
                                </div>
                            </div>
                            <!--  -->
                            <div id="about-me-section-container">
                                <button id="about-me-section-button">
                                </button>
                            </div>
                            <div id="best-of-projects-container">
                                <!-- ------------ -->
                                <button id="best-of-projects-button"></button>
                                <!-- ------------ -->
                            </div>
                            <div id="my-prices-container">
                                <!-- ------------ -->
                                <button id="my-prices-button"></button>
                                <!-- ------------ -->
                            </div>
                            <div id="contact-me-container">
                                <!-- ------------ -->
                                <button id="contact-me-button"></button>
                                <!-- ------------ -->
                            </div>
                            <div id="end-tablet-container">
                                <div id="tablet-end">
                                    <button id="end-button-main"></button>
                                </div>
                            </div>
                        </div>
                        <!-- -------side bar before end-------------------- -->
                        <div id="about-me-section-container"></div>
                    </div>
                    <!-- ----------------------------------sidebar end -->
                </div>
            </div>
            <!-- ------------------------------------------------- -->
            <!-- ----------------------------------------------- -->
        </div>
    </div>


    <script src="/script.js"></script>
</body>

我在css中注解了它
x一个一个一个一个x一个一个二个x

css

来源：https://stackoverflow.com/questions/74891076/positon-absolute-and-z-index-10000-not-working-and-disrupting-divs-with-z-index

2条答案

按热度按时间

7z5jn7bk1#

好了，我做了以下几点：

已将background-color: rgba(45, 66, 163, 0.9);从#app-container-container移动到#app-container
从#app-container中删除overflow属性
添加了等于border-radius一半的填充

我相信这个问题是由overflow: hidden被设置在#app-container上引起的。因为元素在技术上是从border-radius中溢出的，因此被隐藏了。。
请参见下面的片段

#sidebar-container{
    /* z-index: 5; */
    position: relative;
}

/* #about-me-section-container{
    position: absolute;
    z-index: 10000000000000000000000000;
    width: 5rem;
    height: 5rem;
    background-color: azure;
    right: 1px;
}  */

#main-video-container{
    width: 100%;
    height: 100%;
}

/* might break */
#main-content-div{
    position: absolute;
    /* z-index: 10; */
    width: 100%;
    min-height: 100%;
    top: 0;
    display: grid;
}

#app-container{
    width: 65rem;
    height: 45rem;
    align-self: center;
    justify-self: center;
    border-radius: 50px;
    padding: 25px;
    border: 3px solid white;
    background-color: rgba(45, 66, 163, 0.9);
}

#app-container-container{
    position: relative;
    width: 100%;
    height: 100%;
}

/* ------------------app contents---------------------- */

<body>
    <div id="body-protection-container">
        <div id="main-body-container">
            <!-- ------------------------------------------------- -->
            <!-- ------------------------------------------------- -->

            <div id="main-video-container">
                <video width="100%" height="100%" autoplay muted loop>
                    <source src="/videos/l0hfqo.mp4" type="video/mp4">
                </video>
            </div>

            <div id="main-content-div">
                <div id="app-container">
                    <div id="app-container-container">
                        <!-- --------side bar----------------- -->
                        <div id="sidebar-container">
                            <div id="photo-container">
                                <div id="photo-con-two">
                                    <div id="photo-circle-con">
                                        <div id="photo-circle-con-container">

                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--  -->
                            <div id="name-container">
                                <div id="name-con">
                                    <div id="con-name">
                                        S.G
                                    </div>
                                </div>
                            </div>
                            <!--  -->
                            <div id="about-me-section-container">
                                <button id="about-me-section-button">
                                </button>
                            </div>
                            <div id="best-of-projects-container">
                                <!-- ------------ -->
                                <button id="best-of-projects-button"></button>
                                <!-- ------------ -->
                            </div>
                            <div id="my-prices-container">
                                <!-- ------------ -->
                                <button id="my-prices-button"></button>
                                <!-- ------------ -->
                            </div>
                            <div id="contact-me-container">
                                <!-- ------------ -->
                                <button id="contact-me-button"></button>
                                <!-- ------------ -->
                            </div>
                            <div id="end-tablet-container">
                                <div id="tablet-end">
                                    <button id="end-button-main"></button>
                                </div>
                            </div>
                        </div>
                        <!-- -------side bar before end-------------------- -->
                        <div id="about-me-section-container"></div>
                    </div>
                    <!-- ----------------------------------sidebar end -->
                </div>
            </div>
            <!-- ------------------------------------------------- -->
            <!-- ----------------------------------------------- -->
        </div>
    </div>


    <script src="/script.js"></script>
</body>

赞(0）回复(0）举报 2022-12-24

ctehm74n2#

嘿，伙计们，问题是我给2个divs起了同样的名字，结果搞砸了

赞(0）回复(0）举报 2022-12-24