css响应度,如果一个元素“触摸”另一个元素,则更改css位置

当一个元素接触另一个元素时,我如何改变它的位置。

这是一个例子 http://jsfiddle.net/mZYR8/1/

所以,如果你看这个例子,让我们说如果.title-wrap(黄色)接触到.tright 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; 

定位:相对;它应该是这样的:

我可以更改任何需要的内容,也可以添加javascript。但如果可能的话,只使用css,我希望使用css。

谢谢你的帮助!