css - css 响应性，如果一个元素“接触”其他元素改变 css 位置

Question

当一个元素接触另一个元素时，如何更改元素的位置。

这是一个例子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; 

定位：相对；它应该看起来像这样：

我可以更改任何需要的内容，也可以添加 javascript。但如果可能的话，只有css我想用css。

感谢您的帮助！

Answer 1

我想我有一个解决方案，就是让元素向右浮动。

如果有人知道更好的解决方案，请随时添加答案。

这似乎对我有用。

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

   .right-wrap {
        float:right;
        display:inline-block;
        right:0px;
        top:0px;
        background-color:orange;
        padding:20px;
    }

Answer 2

z-index您可以通过为元素赋予CSS 属性来使元素出现在另一个元素之上。

.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越好）