Question

position:relative bottom: 0对我不起作用。我需要将按钮放在我的井底和中心。我还必须将facebook分享链接放在它的左侧，但直到我没有把它放在正确的位置，我现在无法计划facebook链接。

以下是我的代码：

$(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)"});
     
  });
 
});

.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%;
}

#button-shape{
  position:relative;
  bottom: 0;
  padding-left:48%;
  padding-right: 48%;
}

.quote-shape{
  border-radius: 10%;
  width: absolute;
  height: absolute;
}

#page{
  margin-left: 5%;
  margin-right: 5%;
  margin-top:2%;
  margin-bottom:2%;
}
#page-background{
  background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}

#share {
        
        height:30px;
        width: 80px;
        position: 
      }

<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">
         <!--<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">
         <button type="button" id="click button-shape" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
            </button>
        </div>
        </div>
	   </div>
	 </div>
</body>

</html>

Answer 1

除非您之前已将bottom设置为其他值，否则使用position: relative和bottom: 0将不会产生任何视觉效果。

有多种方法可以解决您的问题，其中一种方法是使用position: absolute和transform，如下所示：

#button-prop {
   position: absolute;
   bottom: 0;
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   transform: translateX(-50%);
}

此外，为了使上述代码有效，您需要将父级的position设置为relative。

#page {
  position: relative;
}

但是，对于当前的HTML结构，使用传统方法会失败，因为您已将按钮嵌套在具有padding集的容器内非常深的位置。您需要对HTML结构进行一些重大更改才能获得最佳结果。最重要的是将button作为直接孩子放在井中，#page。

查看JSFiddle here或以下代码段。

<强>段：

/* ----- CSS ----- */

div.background {
  background-color: rgba(245, 245, 245, 0.1);
  border-radius: 10%;
  padding-bottom: 5%;
}

.quote-shape {
  border-radius: 10%;
}

#page {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;
  margin-bottom: 2%;
  width: 1200px;
  height: 450px;
  max-height: 450px;
}

#page-background {
  background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}


/*************** MY CODE ***************/

#page {
  position: relative;
  
  /* I change the dimensions to fit in the snippet. */
  width: 80%;
  height: 150px;
  margin: 5% auto;
}

#button-prop {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

<!----- 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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body id="page-background">
    <div class="well background" id="page">
      <div class="fixed-width">
        <div id="quote" class="position-message">
          <span><p id="quote-form"></p></span>
        </div>
      </div>
      <button type="button" id="button-prop" class="btn btn-outline-secondary btn-circle">
        <i class="fa fa-refresh fa-2x"></i>
      </button>
    </div>
  </body>
</html>

备注：

不要使用click button-shape等空格分隔的ID，因为只会让生活更加困难，导致选择器#click button-shape无效，而是必须使用[id = "click button-shape"]。< / LI>
我只保留了代码的相关部分。

如何将元素放在井底？

1 个答案: