Question

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

所以，如果你看一下这个例子让我们说如果.title-wrap（黄色）触及.right-wrap（橙色）我想要橙色“去”黄色的undenith

<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>

从这里更新问题原因“黄色undenith”不明确

所以，如果一个元素触及另一个元素，我想改变

position:absolute;
right:0px;

位置：相对;它看起来像这样：

how it should look with position:relative;

我可以改变所需的内容，也可以添加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更高）

css响应性，一个元素“触及”另一个元素改变css位置

2 个答案: