Question

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

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

我希望这是有道理的。

非常感谢任何指导。

Answer 1

让您的问题更简化，然后提出解决方案。

首先，你需要有一个容器或地方，它应该完全位于页面的中心。
现在你想要另一个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 Fiddle Demo

Answer 2

如果您想定位一个元素，使其角落位于相对于页面的特定位置，you could just position it absolutely：

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

位于Div中心页面右下角

3 个答案: