使用位置：固定–；CSS

参考本网站www.mrandmrsbutt.com，我试图将“Upwaltham Barns”图形定位在视口的底部中心，因此无论视口大小，图形都会随之移动并停留在底部

我已尝试将以下自定义CSS添加到我的WordPress站点，但似乎不起作用：

.fix{
    position:absolute;
    bottom:0px;
    left:50%;
    }
<img src="http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/banner-cta.png" class="fix"/>

---

有人能帮忙吗？

我想您需要将.fix规则中的position:absolute更改为position:fixed

.fix{
    position:fixed;
    bottom:0px;
    left:50%;
}

这会将图形发送到视口的底部，并在那里滚动。水平中心可能有点棘手，但您可以尝试使用一个固定的容器，将left和right设置为0

.fixed-container{
    position:fixed;
    bottom:0px;
    left:0;
    right: 0;
}

上一条规则将容器设置为视口底部并水平延伸

img.centered {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

此规则应用于图像，以在容器内实现居中对齐

HTML代码：

<div class="fixed-container">
     <img class="centered" src="..image..." />
</div>

---

我认为这应该可以解决问题。

你不想要

位置：固定，使用
absolute
，您的路径是正确的

问题是，目标的父div并非都是视口的100%高度。您已将最外层的父级设置为
height:100vh
，但它确实需要应用于内部的
.vc\u column\u容器
容器（因为它使用基于引导的样式，而BS columns获得相对位置）-因此，向下箭头和图形是基于此进行定位的

试着这样做：

#main-banner .wpex-vc-columns-wrap .vc_column_container {
    height: 100vh;
}
#main-banner .wpex-vc-columns-wrap .vc_inner::last-child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.5%;
}

这将使您更接近您的目标，确保包含所有带有
transform
的供应商前缀，但是如果您使用的是Autoprefixer或Bourbon之类的产品，您已经涵盖了这一点

这里有一些“自定义”样式，我猜您是从页面生成器添加的，可能会弄乱图形/箭头的位置，如果出现问题，请删除不必要的填充

祝婚礼好运：-）
我认为他不希望它在滚动后不断被修复，他希望它“修复”到父级，因此它会随之滚动（即
位置：绝对；
）。“无论视口的大小*图形都会随之移动*并停留在底部”
#main-banner .wpex-vc-columns-wrap .vc_column_container {
    height: 100vh;
}
#main-banner .wpex-vc-columns-wrap .vc_inner::last-child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.5%;
}