Flexbox with Picture and Overlapping Object

Question

I try to put an image and overlapping objects side by side. And then when device width is smaller enough, it puts the image on top of overlapping objects. In this case the overlapping objects are search input (with completion capability that we don't want to discuss here).

So far I got this my jsfiddle link

my css code:

#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%;
}

its html counterpart:

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

This one still doesn't work. As we decrease the size of the window to small size, it doesn't put the image on the top of the overlapping object.

Any ideas?

Are did with responsive. Because of this media css it's happend. #banner-wrapper { height: 70.7833px; margin-left: 5%; order: 1; width: 40px; } — ItzMe_Ezhil, Oct 28 '15 at 13:04
@Ezhil-UI Developer, could you be more clear? I'm not sure what are you suggesting. — ethereal1m, Oct 28 '15 at 17:24
@Michael_B, you got the row wrapping working but the overlapping objects not. The #peoplefind-input should overlap and position exactly on top of #peoplefind-input-x (as it is displayed on my code) — ethereal1m, Oct 29 '15 at 05:47

score 1 · Accepted Answer · edited May 23 '17 at 12:29

There is a lot going on in your code, and I'm not entirely clear what you're trying to accomplish, but based on your question and comments it seems you're trying to resolve two issues:

Make the #peoplefind-sidebar container wrap under the #banner-wrapper on smaller screens.

With a few adjustments to your CSS the containers will stack vertically on smaller screens. Demo: http://jsfiddle.net/cwurw36v/3/
Make #peoplefind-input overlay #peoplefind-input-x on smaller screens.

You want an input to perfectly overlap another input. There are a lot of unknown variables for this request, like when and where do you want them to overlap. Below I've listed several posts with generic solutions.

UPDATE (based on comments)

I try to put an image and overlapping objects side by side. And then when device width is smaller enough, it puts the image on top of overlapping objects.

Okay, I think this does it: http://jsfiddle.net/cwurw36v/4/

Hi Mike, for no 2, the overlay should happen always. If you look at my jsfiddle link, you only see 1 input rectangle. This is because one is overlapping thus your no 1 answer would have been correct if there is 1 rectangle input visible. I think my question is irrelevant because you cannot wrap objects with relative and absolute position in flexbox. Am I right? — ethereal1m, Oct 30 '15 at 06:16
Okay, I think I understand your question now. But there are still many unknown variables. Forgetting that, I've created a basic layout that I believe does what you want. I hope it helps: http://jsfiddle.net/cwurw36v/4/ — Michael Benjamin, Nov 01 '15 at 13:39

Flexbox with Picture and Overlapping Object

1 Answers1