How to prevent div of variable height from moving other elements?

Question

HTML:

<div id="autocomplete" hidden></div>
<input type = "button" id = "search" value = "Search">

The autocomplete div holds various input tags generated by jQuery. When the input tags are created, they shift the button down the screen in order to fit the autocomplete content. What I want to do is to have the autocomplete div overlay on top of the the button rather than shifting the button down.

I have tried using z-index, but it seems to only work if autocomplete is placed after the button in HTML, the using negative margin to shift autocomplete back up. I don't like this solution since it messes up when viewed from other screen sizes.

Is there another way?

You have to use absolute position to accomplish this. – V. Sambor Apr 05 '20 at 03:19 — V. Sambor, Apr 05 '20 at 03:19

score 0 · Answer 1 · answered Apr 05 '20 at 03:25

0

This is the general method to have the items inside the autocomplete div not affect the flow of the other elements on the page (your button in this case).

#autocomplete {
  position: relative;
}

#autocomplete > * {
  position: absolute;
}

A few comments to improve this code:

Don't use IDs (#) on your css. Better stick to class names.
Don't use the wildcard (*) - preferably add the items that will exist inside the autocomplete, which are not shown on the question. And better, wrap them all in another element so you don't have to absolute position all of them individually

answered Apr 05 '20 at 03:25

Martin Buezas

384
2
9

Thanks it works now. I'm not quite sure why this works, though. Would you be able to expand on that? I've never anything that says absolute positioned elements can overlay on top of something else. – yosimba2000 Apr 05 '20 at 08:24
@yosimba2000 - It's because of how an absolutely positioned element positions itself when is inside another "positioned" element. Jump to the absolute position section here https://www.w3schools.com/css/css_positioning.asp – Martin Buezas Apr 05 '20 at 17:24

V. Sambor · Accepted Answer · 2020-04-05T09:06:44.050

I think you have to use absolute positioning to keep the button over the inserting elements.

You can do something like this:

$('#autocomplete').append($('<div>').text('WOW1'))
$('#autocomplete').append($('<div>').text('WOW2'))
$('#autocomplete').append($('<div>').text('WOW3'))
$('#autocomplete').append($('<div>').text('WOW4'))

#container {
  position: relative;
}

#search {
 position: absolute;
 top: 0;
}

#autocomplete {
  padding-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="autocomplete" ></div>
  <input type = "button" id = "search" value = "Search">
</div>

EDIT:

Here is a link to see how CSS position works: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Also I recommend you to check this stack overflow answer about relative vs absolute positioning it has a very natural response (Position Relative vs Absolute?)

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.

Thanks it works now. I'm not quite sure why this works, though. Would you be able to expand on that? I've never anything that says absolute positioned elements can overlay on top of something else. — yosimba2000, Apr 05 '20 at 08:23
@yosimba2000 I would recommend you to read about CSS layouts and position. I will update the question with a link to MDN — V. Sambor, Apr 05 '20 at 09:03
@yosimba2000 I have edit the question and added some info, could you please accept the answer if it works? — V. Sambor, Apr 05 '20 at 23:49

How to prevent div of variable height from moving other elements?

2 Answers2