时间戳

首页 > 解决方案 > 如何将元素的位置固定到页面？

html - 如何将元素的位置固定到页面？

问题描述

我目前有这张图片。圆圈，关闭图像，并获取您的报价图像。（见下文）

正确的图像布局

我无法将所有元素固定在一起，因此当我更改屏幕大小时，元素会一起移动，而不是在页面上单独移动。（见下文）

图片布局不正确

我已经查看了每个元素的位置，但我可能误解了一些东西，或者我的代码很乱。请看下面：

HTML：

<body>
            <!--Thanks for visiting image-->
                <div id="thanks-for-visiting-img-bg" class="thanks-for-visiting-bg">
                    <div id="thanks-for-visiting-img-container" class="thanks-for-visiting-img-container">
                        <img src="../images/thanks_for_visiting_img.png" alt="Thanks for visiting" id="thanks-for-visiting-img" class="thanks-for-visiting-img">
                    </div>
                </div>
                <!--Get Quotes button-->
                <div>
                    <img src="../images/btn.png" alt="Get Your Quotes" id="get-quotes-btn" class="get-quotes-btn">
                </div>
                <!--Close button-->
                <div>
                    <img src="../images/close_green.png" alt="Close Thanks For Visiting image" id="close-btn" class="close-btn">
                </div>
            
    </body>

</html>

CSS：

/*CONTAINER*/

.thanks-for-visiting-img-container {
    width: 550px;
    height: 550px;
    z-index: 2147483647;
    left: 0px;
    right: 0px;
    margin: auto;
    top: 0px;
    bottom: 0px;
    display: block;
    outline: none;
    max-width: none;
    max-height: none;
    position: fixed !important;
    cursor: default !important;
}

/*IMAGE BACKGROUND*/

.thanks-for-visiting-bg {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /*z-index: 2147483647;*/
    overflow: auto;
    background-color: rgb(0, 0, 0);
    opacity: 0.83;
}


/*-- GET QUOTES BUTTON --*/

.get-quotes-btn {
    cursor: pointer;
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    width: 288px;
    height: 49px;
    border-radius: 0px;
    z-index: 2;
    right: 0px;
    bottom: auto;
    left: -20px;
    top: 425px;
    margin: auto;
    display: block;
}

.close-btn {
    cursor: pointer;
    position: absolute;
    right: 50%;
    bottom: 100px;
    left: 65%;
    top: 80px;

}

.thanks-for-visiting-img-container和.thanks-for-visiting-bg必须修复，因为 bg 类的 CSS 没有它就无法工作，并且 img 容器必须修复，因为页面需要滚动在它下面。任何人都可以帮忙吗？

标签： htmlcsscss-position

解决方案

您可以将所有div标签（获取报价、图像和关闭按钮）放在另一个div标签中，然后将此 CSS 类添加到该新div标签中：

.mainClass {
    display: flex;
    flex-direction: column;
}

推荐阅读