jquery - 定位页面Div中心的右下角

Question

我有一个带有背景图像的 div，我正在努力将它正确定位到我的要求。

我想将 div 的右下角定位到页面的中心，左上角位于左上角，并以不同的分辨率调整保持在这些位置。

我希望这是有道理的。

任何指导将不胜感激。

Answer 1

让你的问题更简单，然后把解决方案。

1. 首先你需要有一个容器或地方，它应该正好在页面的中心。
2. 现在你想要另一个 div 应该在这个居中的 div 的右下角。

正如我们所知， 绝对定位元素从它们最后一个相对定位的父元素开始计算其位置。所以你可以做的是创建一个居中的 div 并在其中创建容器，该容器将相对定位并作为右下角 div 的父级。现在您可以将绝对位置放在右下角的 div 里面。

这是代码示例。

<div class="center">
    <div class="container">
        <div class="bottomRight">
        </div>
    </div>
</div>

和 CSS

body{
   background:#EFEFEF;
}
.center {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
   background:Red;
}

.container{
   position:relative;
   background:yellow;
   height:100%;
 }
.bottomRight{
    position:absolute;
    right:0px;
    bottom:0px;
    background:Blue;
    width:100px;
    height:100px;
 }

Js 小提琴演示

Answer 2

如果您想定位一个元素，使其角相对于页面位于特定位置，您可以将其绝对定位：

div {
    position: absolute;
      top: 0;
      right: 50%;
      bottom: 50%;
      left: 0;
}

本质上，这将始终指定其边缘的位置，而不管窗口如何（重新）调整大小。

Answer 3

如果我正确理解了您的问题，我认为您应该添加这些 css 规则：

.your_div_class{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 50%;
}