Question

所以我创建了一个名为div的div，我按高度百分比调整了大小。我想要在它下面25个像素的位置。由于这个项目不是一个固定的高度，我不知道该怎么做。如果这令人困惑，我也有一个jsfiddle here。如果你仍然感到困惑，我试图将div THISONE中的文本显示为低于25px。

HTML：

<div id="absoluteDiv"></div>
<div id="THISONE">
 I WANT THIS TO SHOW 25px Below the "absoluteDiv"    
</div>

CSS：

#absoluteDiv  {
    background-color:#0F0;
    position:absolute;
    width:100%;
    height:45%;
}

#THISONE {
}

Answer 1

您可以执行以下操作：

#THISONE {    
    position:absolute;
    top:calc(45% + 25px);
}

http://jsfiddle.net/05Lrdhu5/

Answer 2

另一个解决方案是让它成为绝对div的相对子女的孩子。

<div id="absoluteDiv">
    <div id="container">
        <div id="THISONE">
         I WANT THIS TO SHOW 25px Below the "absoluteDiv"    
        </div>
    </div>
</div>

#container
{
    position: relative;
    width: 100%;
    height: 100%;
}

#THISONE {    
    position: absolute;
    top: 100%;
    margin-top: 25px;
}

JSFiddle

未决：

这个问题就好了。让我再看一下。

~~如果条件准确，一种解决方案就是简单地使用填充和计算：~~

#THISONE { padding-top: calc(45% + 25px); }

<击> JSFiddle

定位在非固定元素下方

2 个答案:

未决：