微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

当容器使用位置固定时,如何使按钮链接工作?

如何解决当容器使用位置固定时,如何使按钮链接工作?

您好,我有一个需要链接到另一个网页的按钮,但是由于某种原因,当该按钮位于使用固定位置的容器内时,该按钮不起作用。

有人知道如何进行这项工作吗?我通过使按钮使用相对位置来尝试各种东西

通常我会使用绝对位置,但在这种情况下,我希望按钮容器位于页面底部在这种情况下,绝对位置不会很好地工作,因为我将其添加到的网站是超长网页。

此项目也仅适用于移动设备

.install-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;

    position: fixed;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 50;
    width: 100%;
}

.install-content {
    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    color: black;

    padding: 10px 20px;
    border-radius: 11px;
    -webkit-Box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
}

.install-container #logo {
    height: 100%;
    width: auto;
    margin-right: 13px;
}

.install-container .install-content {
    margin: 8px;
}

.install-container .install-content p {
    margin: 0;
}

.install-container .install-content .content {
    margin-right: 10px;
}

.install-container .install-content .content p {
    font-size: 16px;
}

.install-container button {
    height: 100%;
    width: auto;
    padding: 3px 31px;
    border-radius: 17px;
    background: #428bca;
    color: white;
    border: none;
}

.install-container .install-content .content .star-content {
    display: flex;
}

.install-container .install-content .content p {
    font-size: 14px;
}

.install-container .install-content .content .star-content .stars {
    font-size: 14px;
    margin-right: 5px;
}

.install-container .install-content .content .star-content p {
    font-size: 14px;
}
    <!-- Install -->
        <div class="install-container">
            <div class="install-content">
                
                <div class="content">
                    <p style="font-weight: bold">Dating App</p>
                    <p style="color: #666">Hello</p>
                    <div class="star-content" style="color: #666">
                        <div class="stars">
                            &bigstar; &bigstar; &bigstar; &bigstar; &bigstar;
                        </div>
                        <p>18K ratings</p>
                    </div>
                </div>

                <a
                    href="google.com"
                >
                    <button
                        type="button"
                        class="btn-install btn-md modal-btn click-next"
                        data-dismiss="modal"
                    >
                        Install
                    </button>
                </a>
                
            </div>
        </div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。