0

ある要素が別の要素に触れたときに要素の位置を変更するにはどうすればよいですか。

ここに例がありますhttp://jsfiddle.net/mZYR8/1/

したがって、例を見ると、.title-wrap (黄色) が .right-wrap (オレンジ) に触れている場合、オレンジ色を「黄色を消したい」と言うことができます。

<div class="wrap">
    <div class="title-wrap">
        <h1>Lorem Ipsum Dolor</h1>
    </div>
    <div class="right-wrap">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</div>
<style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    .title-wrap {
        background-color:yellow;
        display:inline-block;
    }
    h1 {

        font-size:20px;
        line-height:40px;
    }
    .right-wrap {
        position:absolute;
        display:inline-block;
        right:0px;
        top:0px;
        background-color:orange;
        padding:20px;
    }
    .right-wrap span {
        display:inline-block;
        width:20px;
        height:20px;
        margin-right:10px;
        background-color:purple;
    }
</style>

ここから更新された質問の原因「黄色の不死」は明確ではありませんでした

そのため、ある要素が他の要素に触れている場合は、変更したいと思います

position:absolute;
right:0px;

配置する:相対; 次のようになります。

position:relative; でどのように見えるか

必要なものは何でも変更でき、javascript を追加することもできます。しかし、cssのみで可能であれば、cssでお願いします。

助けてくれてありがとう！

4

2 に答える 2

2

要素を右にフロートさせるという解決策があると思います。

誰かがより良い解決策を知っている場合は、お気軽に回答を追加してください。

これは私にはうまくいくようです。

http://jsfiddle.net/mZYR8/2/

   .right-wrap {
        float:right;
        display:inline-block;
        right:0px;
        top:0px;
        background-color:orange;
        padding:20px;
    }
于 2013-10-31T15:37:04.767 に答える
1

z-indexCSS プロパティを指定することで、要素を別の要素の上に表示させることができます。

.right-wrap {
    position:absolute;
    display:inline-block;
    right:0px;
    top:0px;
    background-color:orange;
    padding:20px;
    z-index:-1;
}

と：

.title-wrap {
    background-color:yellow;
    display:inline-block;
    z-index:1;
}

動作するはずです（高いz-indexほど上に行きます）

于 2013-10-31T15:16:48.600 に答える