1

我有一个元素并分配top: -100%给该元素。我需要top: -100%翻译成top: -{height-of-the-element}. 但我得到的是top: -{height-of-another-element-wrapping-it}。

下面是一些解释 HTML 和 CSS 的代码（不是完整代码，因为它非常复杂）：

<nav>
    <section>
        <ul>
            <li>
                <ul class="i-want-to-use-top-here"></ul>
            </li>
        </ul>
    </section>
</nav>

 

nav {
    height: 60px;
}

.i-want-to-use-top-here {
    height: 200px;
    position: absolute;
    top: -100%;
}

为什么会这样？如何获得要使用的元素高度的 -100% top？

4

3 回答 3

1

我可能会去，transform: translate()因为你似乎并不关心让它保持正常流动。这样，如果元素内容发生变化，您无需担心更改高度：

.i-want-to-use-top-here {
  background: rgba(175,175,175, .5);
  -webkit-transform: translate(0, -100%);    
}

小提琴：http : //jsfiddle.net/fuBr9/

于 2013-09-06T13:22:49.817 回答
0

添加位置：相对；导航并重试。

于 2013-09-06T13:11:42.140 回答
0

top始终分配相对于父元素的位置。但是，如果您手动设置高度，因为您似乎基于您的 css，为什么不手动将 top 设置为相同的值？

.i-want-to-use-top-here {
    height: 200px;
    position: absolute;
    top: -200px;
}

然后，如果/当您以height编程方式更改时，只需top同时更改值。

于 2013-09-06T13:15:50.173 回答