Question

我想在右下角响应地放置一个按钮。到目前为止，我已将按钮固定在居中的容器上。

问题

如果我在任何时候拉伸页面（上下或侧面上下），它会消失/稍微失去焦点。

预期：

我希望这个黄色按钮在任何时候都是可变的，即使浏览器被拉伸了。

代码：

＆＃13;

    .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;
     }

＆＃13;

 <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>

＆＃13;

此外，如果您想查看可见性效果，只需打开代码段，点击full page并拉伸窗口。

容器：蓝色＆amp;固定按钮：黄色。

顺便说一句，容器有一个加载插件的croll，所以当用户向下滚动页面时它会向下增长，因此.container会增长并且按钮不能完全定位。

Answer 1

您可以使用绝对位置对齐div底部的按钮。您可以尝试将css更改为此。

 select T.number, max(T.MOST_FREQUENT) max_val, W.MOST_FREQUENT, W.Type
  from (

  SELECT *, SUM(quantity) AS MOST_FREQUENT
       FROM datas
       WHERE date_status=1
       GROUP BY number,type
       ORDER BY SUM(quantity) DESC LIMIT 200 ) T 
  INNER JOIN (
  SELECT *, SUM(quantity) AS MOST_FREQUENT
           FROM datas
           WHERE date_status=1
           GROUP BY number,type
           ORDER BY SUM(quantity) DESC LIMIT 200
  ) W ON T.number = W.number 
  group by T.number, , W.MOST_FREQUENT, W.Type
  ORDER BY  max(T.MOST_FREQUENT)  DESC
           , (max(T.MOST_FREQUENT)=W.MOST_FREQUENT) DESC
           ,  W.MOST_FREQUENT
           , W.Type

这应该有你想要的行为。希望这有帮助

Answer 2

如果您想将按钮固定在右下角，则可以使用位置：绝对而非固定。

如果您想要响应式设计，请不要使用具有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;
 }

我希望这会有所帮助，

Answer 3

根据您的要求，纯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。

位置响应固定按钮到div容器css

3 个答案: