我想在右下角响应一个按钮。到目前为止,我已将按钮固定在居中的容器上。
问题
如果我在任何时候拉伸页面(上下,或上下两侧),它会消失/稍微失去焦点。
预期:
即使浏览器被拉伸,我希望这个黄色按钮始终可见。
码:
.container{
margin:0 auto;
max-width:480px;
height: 50vh;
width: 100%;
text-align:center;
background:blue;
}
.fixed_button{
position: fixed;
bottom: 10px;
width: 70px;
height: 20px;/*height: auto;*/
margin-left: 405px;
border: 0px solid #d6d6d6;
z-index: 99;
padding: 0;
text-align: center;
background: yellow;
}
.spaces{
width: 100%;
height: 500px;
border: 1px solid #000;
}
<div class="container">
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="fixed_button"></div>
</div>
此外,如果您想要查看可见性效果,只需打开代码段,单击full page
并拉伸窗口。
容器:蓝色和固定按钮:黄色。
顺便说一句,容器有一个加载插件的croll,所以它随着用户向下滚动页面向下增长,所以.container
增长,按钮不能绝对定位。
您可以使用绝对位置对齐div底部的按钮。您可以尝试将css更改为此。
.fixed_button{
position: absolute;
bottom: 5px;
right: 5px;
width: 70px;
border: 0px solid #d6d6d6;
//wrest of your styles
}
这应该有你想要的行为。希望这可以帮助
如果您希望按钮固定在右下角,则可以使用position:absolute而不是fixed。
如果您想要响应式设计,则不要将margin属性与PX值一起使用。尝试使用百分比(%)
请尝试以下代码段,
.fixed_button{
position: absolute;
bottom: 10px;
right: 10px;
width: 70px;
height: auto;
padding: 25px;
border: none;
z-index: 99;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
text-align: center;
}
我希望这个能帮上忙,
根据您的要求,纯CSS解决方案不起作用。在窗口调整大小后,您必须使用Jquery
计算容器的宽度,然后计算正确的位置,然后将其分配给固定元素。
$(window).on('resize', function(){
var conwidth = $('.container').width()/2 - 30;
$('.fixed_button').css('left','calc(50% + '+conwidth+'px)');
});
.container{
margin:0 auto;
max-width:480px;
height:600px;
text-align:center;
background:blue;
}
.fixed_button{
position: fixed;
bottom: 0px;
left: calc(50% + 210px);
width: 30px;
border-radius:50%;
height:30px;
z-index: 99;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="fixed_button"></div>
</div>
所以我做了计算,比如获取容器宽度,然后除以2然后减去固定元素宽度。之后,我将其应用为固定元素的左侧位置。
这是你可以玩的JSFIDDLE。