定位：固定元素全视口宽度，尽管有容器

Question

我有一个 position: fixed 的粘性导航元素，具有以下样式：

.sticky_product_form {
   overflow: hidden;
   background-color: white;
   position: fixed;
   bottom: 0;
   z-index: 1000;
   display: block;
   width: 100%;
}

当满足特定条件时，它会显示在视口底部。它在容器 div 内，问题是我无法将此元素移出此结构。它在左侧有一个不是边距或填充的间隙（我不相信，通过开发工具）。我无法查明原因。我尝试使用 100vw 但这并没有使它比现在更大。无论容器如何，我怎样才能使这个全宽？

Answer 1

您需要包括水平放置，因此添加“left: 0;”无论容器如何，都会将 div 定位到屏幕左侧。

你的css：

.sticky_product_form {
  overflow: hidden;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  width: 100%;
}

视觉笔：https://codepen.io/sidraish/pen/mdRLvaM

定位：固定元素全视口宽度，尽管有容器

Making a position: fixed element full viewport width despite container

html

css

responsiveness