如何将按钮定位在well底部并居中？position:relative bottom:0失效求助

我来帮你搞定这个定位问题！你遇到的核心问题是position: relative的工作方式——它不会让元素脱离正常文档流，所以bottom: 0只是让元素相对于自己原来的位置向下偏移0，并不会固定到容器底部。咱们来一步步调整：

关键修改点： #

• 给容器（你的.well#page）设置position: relative，作为内部绝对定位元素的参考上下文
• 将按钮容器#button-shape改为position: absolute，并通过left: 0; right: 0实现水平居中，同时固定在容器底部
• 使用Flex布局让分享链接和按钮在同一行对齐，避免手动计算padding
• 给容器添加底部内边距，防止内容被底部的按钮/分享链接遮挡

修改后的完整代码： #

HTML部分：

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="container-fluid">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
<div class="row" id="button-shape">
<div id="share" class="col d-flex align-items-center justify-content-end">
<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
<i class="fa fa-facebook-official"></i> Share
</a>
</div>
<div class="col d-flex align-items-center justify-content-start">
<button type="button" id="click" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>

CSS部分：

.position-message{ 
  margin-left: 25%; 
  margin-right:25%; 
  margin-top:10%; 
}
.background{ 
  background-color: rgba(245,245,245,0.2); 
  border-radius:10%; 
  padding-bottom: 10%; 
}
#page{ 
  margin-left: 5%; 
  margin-right: 5%; 
  margin-top:2%; 
  margin-bottom:2%; 
  position: relative; /* 添加相对定位作为上下文 */
  padding-bottom: 60px; /* 预留底部空间，避免内容被遮挡 */
  min-height: 300px; /* 确保容器有最小高度，避免内容过少时按钮重叠 */
}
#button-shape{ 
  position: absolute; /* 改为绝对定位 */
  bottom: 20px; /* 距离底部的间距 */
  left: 0; 
  right: 0; 
  max-width: 600px; /* 限制最大宽度，避免太宽 */
  margin: 0 auto; /* 水平居中 */
}
#share { 
  height:30px; 
  width: 80px; 
}
.quote-shape{ 
  border-radius: 10%; 
  /* 移除无效的width/height: absolute属性 */
}
#page-background{ 
  background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg); 
}

JavaScript部分：

$(document).ready(function() { 
  var content=""; 
  $("#click").click(function() { 
    $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) { 
      content=key[0].content + "<p>— " + key[0].title + "</p>"; 
      $("#quote-form").html(content); 
      console.log(content); 
    }); 
    $("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"}); 
  }); 
});

额外说明： #

• 修复了按钮的无效ID（原来的id="click button-shape"包含空格，不符合HTML规范）
• 使用Bootstrap的Flex布局类，让分享链接和按钮垂直居中并分别对齐左右，布局更灵活
• 给容器设置min-height，确保即使引用的内容很少，按钮也能稳定显示在底部

内容的提问来源于stack exchange，提问作者Gaurav Thantry