CODEWITHSUNDEEP
javascripthtmlcss
JunM
JunM

Reputation: 7150

Absolute element won't scroll

Using position absolute will make my dynamic element doesn't go together with other elements when I scroll up/down. But if I will use relative it will work. But I need the position absolute to not mess the sizes of other elements (example: I need to maintain the height of nodes 1-3).

HTML

<ul id="container">
  <li id="1">node 1</li>
  <li id="2">node 2</li>
  <li id="3">node 3</li>
</ul>

CSS

li{
  padding: 50px;
}

ul{
  max-height: 200px;
  overflow-y: scroll;  
}

JS

var template = document.createElement('div');
template.style.height = "100px";
template.style.width = "100px";
template.style.border = "1px solid blue";
template.style.position="absolute"; // I NEED THIS AS I DON'T WANT THE ELEMENT TO PUSH OTHER ELEMENTS AFTER IT

//template.style.position="absolute"; //THIS FIX THE ISSUE BUT THIS WILL MOVE OTHER ELEMENTS

var el1 = document.getElementById('1');
el1.append(template);

Here's the fiddle: fiddle

Upvotes: 1

Views: 1751

Answers (2)

Bajpai Praveen
Bajpai Praveen

Reputation: 11

Remember that the position absolute is work inside the Parent who have position relative. so please insure your absolute element vary inside the relative element.

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

If you add position: relative to the parent tag <li>:

li {
    padding: 50px;
    position: relative;
}

...will you get the expected result?

var template = document.createElement('div');
  template.style.height = "100px";
  template.style.width = "100px";
  template.style.border = "1px solid blue";
  template.style.position="absolute";

var el1 = document.getElementById('1');
  el1.append(template);
li{
  padding: 50px;
  position: relative;
}


ul{
  max-height: 200px;
  overflow-y: scroll;  
}
<ul id="container">
  <li id="1">node 1</li>
  <li id="2">node 2</li>
  <li id="3">node 3</li>
</ul>

Upvotes: 2

Related Questions