Javascript 我如何将我的元素放置在井底？

位置：relative

底部：0

对我不起作用。我需要把按钮放在井的底部和中间。我还必须将facebook共享链接放在它的左侧，但除非我将其放在右侧，否则我现在无法计划facebook链接

下面是我的代码：

$（文档）.ready（函数（）{
var-content=“”；
$（“#单击”）。单击（函数（）{
$.getJSON（“//quotesondesign.com/wp json/posts？filter[orderby]=rand&filter[posts\u per\u page]=1&\u jsonp=？”，函数（键）{
内容=键[0]。内容+“-”+键[0]。标题+“
”；
$（“#报价表”）.html（内容）；
控制台日志（内容）；
});
css（{“字体系列”：“lucida控制台”，“字体大小”：“20px”，“颜色”：“rgb（255255150）”）；
});
});
.position消息{
左边缘：25%；
右边距：25%；
利润率最高：10%；
}
.背景{
背景色：rgba（245,0.2）；
边界半径：10%；
垫底：10%；
}
#纽扣形状{
位置：相对位置；
底部：0；
左：48%；
右：48%；
}
.引用形状{
边界半径：10%；
宽度：绝对宽度；
高度：绝对高度；
}
#页面{
左缘：5%；
保证金权利：5%；
利润率最高：2%；
利润底部：2%；
}
#页面背景{
背景图片：url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
#分享{
高度：30px；
宽度：80px；
职位：
}

单击以获取报价

除非您之前将
底部
设置为另一个值，否则使用
位置：相对
和
底部：0
将不会产生任何视觉效果

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

按钮道具{
位置：绝对位置；
底部：0；
左：50%；
-webkit转换：translateX（-50%）；
-moz变换：translateX（-50%）；
-ms转换：translateX（-50%）；
-o-转换：translateX（-50%）；
转化：translateX（-50%）；
}

此外，为了使上述代码正常工作，您需要将父级的

位置设置为
相对

#第页{
位置：相对位置；
}

但是，在当前的
HTML
结构中，使用传统方法将失败，因为您将按钮嵌套在容器中非常深的位置，该容器具有
填充设置。为了获得最佳结果，您需要对
HTML
结构进行一些重大更改。最重要的是，将
按钮
作为直接子项放入井中，
#page

查看JSFIDLE或以下代码段

片段：


/*----CSS-----*/
部门背景{
背景色：rgba（2452452452450.1）；
边界半径：10%；
垫底：5%；
}
.引用形状{
边界半径：10%；
}
#页面{
左缘：5%；
保证金权利：5%；
利润率最高：2%；
利润底部：2%；
宽度：1200px；
高度：450px；
最大高度：450像素；
}
#页面背景{
背景图片：url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
/***************我的代码***************/
#页面{
位置：相对位置；
/*我更改尺寸以适应代码段*/
宽度：80%；
高度：150像素；
利润率：5%自动；
}
#按钮支柱{
位置：绝对位置；
底部：0；
左：50%；
-webkit转换：translateX（-50%）；
-moz变换：translateX（-50%）；
-ms转换：translateX（-50%）；
-o-转换：translateX（-50%）；
转化：translateX（-50%）；
}


您的井容器在此代码中的位置刚刚添加。按钮位于底部。但是它考虑了它的前身的
top
属性。解释：当我单击按钮时，会触发一个API，并弹出一个随机引用。现在，此顶部属性测量按钮和内容之间的距离，并重新定位按钮。如何相对于页面而不是页面的前身来定位按钮？请查看我关于您在chat@GauravThantry中告诉我的更改的信息。