悬浮模块

<style>
	/* 自定义样式 */
	.custom-module {
	  position: fixed;
	  display: flex;
	  bottom: 10px;
	  left: 0;
	  width: 100%;
	}

	@media (min-width: 768px) {
	  .custom-module {
		position: relative;
		bottom: auto;
		left: auto;
		width: auto;
		margin: 0 auto;
		text-align: center;
	  }
	}
 </style>
<div class="custom-module">
	悬浮内容
</div>

<style>
    .cookie-form {
      position: fixed;/* 悬浮 */
      bottom: 0px; /* 距离底部的距离 */
      left: 0px; /* 距离左侧的距离 */
      max-width: 440px;
      max-height: 500px;
      z-index: 9000;/* 前后层权重设置高值是时刻在其他模块前面 */
    }
    .is-flex2 {
            display: flex;
            justify-content: space-between;
        }
    .flex2-left {
            text-align: left;
        }
    .flex2-right {
        text-align: right;
    }
</style>
<article class="message cookie-form" id="cookie-form">
        <div class="message-header">
          <p>{% trans "允许我们使用cookie" %}</p>
        </div>
        <div class="message-body">
            <p>{% trans "我们使用cookie来提升购物体验。如果您选“全部拒绝”,则只会使用必要的cookie,欲了解更多信息请阅读我们的" %}<a href="https://info.btcmai.com/">{% trans "cookies政策" %}</a></p>
            <p class="mt-1 has-text-weight-semibold">{% trans "选择您要使用的cookie" %}:</p>   
            <div class="is-flex2 mt-1">
                <span class="flex2-left">
                    {% trans "网站基本功能(强制)" %}</label>
                </span>
                <span class="flex2-right">
                    <input type="checkbox" checked disabled>
                </span>
            </div>
            <form>
            <div class="is-flex2 mt-2">
                <span class="flex2-left">
                    {% trans "了解和优化用户体验(可选)" %}</label>
                </span>
                <span class="flex2-right">
                    <input type="checkbox" id="c1">
                </span>
            </div>
            <div class="is-flex2 mt-2">
                <span class="flex2-left">
                    {% trans "优化广告效果(可选)" %}</label>
                </span>
                <span class="flex2-right">
                    <input type="checkbox" id="c2">
                </span>
            </div>
            </form>
            <div class="is-flex2 mt-1">
                <span class="flex2-left">
                    <button class="button is-small is-dark mt-2" onclick="cookiejs()">{% trans "接受" %}</button>
                </span>
                <span class="flex2-right">
                    <button class="button is-small is-dark mt-2" onclick="cookiejj()">{% trans "全部拒绝" %}</button>
                </span>
            </div>       
        </div>
      </article>