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

top常に親要素に相対的な位置を割り当てます。ただし、高さを手動で設定している場合は、css に基づいているように見えるので、手動で top を同じ値に設定してみませんか?

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

次に、heightプログラムで変更するtop場合は、同時に値を変更します。

于 2013-09-06T13:15:50.173 に答える