Question

我有两个图像绝对位于div中。如果我删除bottom属性，则图像就位（我需要使用bottom进行精确定位）。如果我添加了bottom属性，则图片将保留其imageHeight父容器并移至页面顶部。

知道为什么会这样做吗？

HTML

    <div class="imageHeight">
        <div class="imageInline" id="rbMain"></div>
        <div class="imageInline" id="rbPhone"></div>
    </div>

CSS

section#item1 #rbMain{
    margin: 0 auto;
    z-index: 1000;
    width: 1000px;
    height: 516px;
    background-image: url("../images/rb-large-pc.png");
    left: 0;
    right: 0;
    bottom: 5px;
}

section#item2 #rbPhone{
    right: 20%;
    width: 383px;
    height: 500px;
    background-image: url("../images/rb-large-phone.png");
    bottom: 5px;
}

.imageHeight{
    height: 516px;
}

section.showcase .imageInline{
    position: absolute;
}

Answer 1

要将2个元素绝对放在父元素中，父元素本身应该具有绝对位置或相对位置。

.imageHeight{
    position: relative;
    height: 516px;
}

Answer 2

尝试将position: relative提供给.imageHeight

.imageHeight{
    height: 516px;
    position:relative;
}

CSS bottom属性将图像移动到页面顶部

2 个答案: