Question

参考这个网站 - 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"/>

目前我的所有自定义CSS都是：

#site-header.overlay-header{background-color:#fff;}
.menu-item a span:hover{color:#dfb5a9;}
#main-banner{
    background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/Top-Banner-Background.jpg);
    background-size:cover;
    background-position:center center;
    height:100vh;
}
.centre{
    display:inline-block;
    text-align:center;
}

#navigation-bar{
    background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/navigation-background.jpg);
    background-repeat:repeat-x;
    height:48px;
}

p{margin-bottom:10px;}
.paper-background{
    background: #fff url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/white-background.jpg) repeat top left;
}

有人可以帮忙吗？

Answer 1

我认为你需要改变位置：绝对位置：固定在.fix规则

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

这应该将您的图形发送到视口的底部，然后滚动到那里。水平中心可能有点棘手，但您可以尝试使用左右设置为0的固定容器。

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

之前的规则将容器设置为视口的底部并水平延伸。

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

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

HTML code：

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

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

Answer 2

您不希望position: fixed;，使用absolute进入正确的道路。

问题在于，您所定位的内容的父div不是视口的所有100％高度。您已将最外层的父级设置为height: 100vh;，但确实需要应用于内部.vc_column_container容器（因为它使用基于引导程序的样式，和BS列相对位置 - 所以你的向下箭头和图形正在根据它定位。

尝试这样的事情：

#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之类的东西，那么您就可以了已经有了这个......

有一些＆＃34; custom＆＃34;那里的样式我猜你已经从一个页面构建器添加了可能会弄乱图形/箭头的位置，如果它没有被淘汰就删除不必要的填充。

婚礼祝你好运： - ）

使用position：fixed - CSS

2 个答案: