Question

我尝试将图像和重叠的对象并排放置。然后，当设备宽度足够小时，它会将图像放在重叠对象的顶部。在这种情况下，重叠对象是搜索输入（具有我们不想在此讨论的完成功能）。

到目前为止，我得到了这个my jsfiddle link

我的css代码：

#banner-wrapper {
    order: 1;
     height: 70.7833px;
     width:40px;
     margin-left: 5%;
}
img {
    width: 40%;
}

@media all and (min-width: 360px) {
    #banner-wrapper {
        flex: 2 1 auto;
    }
    #peoplefind-sidebar {
        flex: 2 1 auto;
    }
}

@media all and (min-width: 360px) {
    #banner-wrapper, #banner-wrapper>* {
        order: 1;
    }
    #peoplefind-sidebar,#peoplefind-sidebar > *,.people-search   {
        order: 2;
    }
}

#header-wrapper {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    display: -webkit-flex;
    position: relative;
    z-index: 0;
}

#peoplefind-sidebar {
    display: -webkit-flex;
    display: flex;
}

.people-search {
    top: 50%;
    height: 35%;
    width: 22% !important;
    border: 1px solid #666;
    border-radius: 3px;
    padding: 3px;
    position: absolute;
}

#peoplefind-input {
        background: transparent;
        z-index: 1;
}

#peoplefind-input-x {
        color: #CCC; background: transparent; 
}

#side-peoplefind-submit {
    position: absolute; 
    top: 50%;
    height: 30%;
    left: 80%;
}

它的html对应物：

<div id="header-wrapper">
    <div id="banner-wrapper">
        <img class="nav-logo-image" id="logo-img" src="http://images.freeimages.com/images/previews/ba3/sunflowers-3-1393952.jpg" alt="logo">
    </div>
    <div id="peoplefind-sidebar">
        <form id="peoplefind-form" action="peoplefind/profile" method="post">
            <input autocomplete="off" id="peoplefind-input" class="people-search" placeholder="Find contacts, item_id, and word search here" name="people_search"  type="text">
            <input id="peoplefind-input-x" class="people-search" name="people_search" disabled="disabled"  type="text">
            <button id="side-peoplefind-submit" type="submit">Find</button>
        </form>
    </div>
</div>

这个仍然不起作用。当我们将窗口的大小减小到小尺寸时，它不会将图像放在重叠对象的顶部。

有什么想法吗？

Answer 1

您的代码中有很多内容，我并不完全清楚您尝试完成的内容，但根据您的问题和评论，您似乎正在尝试解决两个问题的问题：

在较小的屏幕上#peoplefind-sidebar下进行#banner-wrapper容器包装。

通过对CSS的一些调整，容器将在较小的屏幕上垂直堆叠。演示：http://jsfiddle.net/cwurw36v/3/
在较小的屏幕上制作#peoplefind-input重叠#peoplefind-input-x。

您希望input与另一个input完全重叠。此请求有很多未知变量，例如时您希望它们重叠。下面我列出了一些通用解决方案的帖子。

更新（基于评论）

我尝试将图像和重叠的对象并排放置。然后当设备宽度足够小时，它会将图像放在上面重叠的对象。

好的，我认为这样做：http://jsfiddle.net/cwurw36v/4/

Flexbox与图片和重叠对象

1 个答案: