position fixed元素不显示：如何将Cookie声明固定至屏幕右下角

你的Cookie提示无法正常显示，核心问题是**position: fixed的定位属性冲突**，再加上多余属性的干扰：

• 同时设置top:0%、bottom:0%、left:0%、right:0%，又搭配固定宽高，浏览器无法正确计算元素位置，直接导致布局异常。
• float属性对position: fixed的元素完全无效，属于冗余代码。

CSS部分 #

.cookie {
  position: fixed;
  /* 直接定位到右下角 */
  bottom: 20px; /* 距离底部的距离，可按需调整 */
  right: 20px;  /* 距离右侧的距离，可按需调整 */
  width: 100px;
  height: 50px;
  opacity: 0.5; /* 也可以写50%，两种写法均支持 */
  background-color: #FA0;
  padding: 8px; /* 可选：让文字不紧贴容器边缘 */
  box-sizing: border-box; /* 确保内边距不扩大元素总尺寸 */
}

.cookie-text {
  color: #FFF;
  text-align: center;
  margin: 0; /* 去除p标签默认外边距，避免文字溢出容器 */
}

HTML部分（无需修改） #

<section class="cookie">
  <p class="cookie-text">Cookie statement </p>
</section>

• 仅通过bottom和right属性定位，避免top/left与固定宽高的布局冲突。
• 移除无效的float: right属性。
• 优化文字容器的默认样式，避免内容溢出或显示错位。

内容的提问来源于stack exchange，提问作者NOOIT