＆＃34; float：left＆＃34; div被输入焦点压低了

Question

我有以下表格用于歌词上传。我已经改变了一点形式的设计，现在面临一个奇怪的问题。

我使用JS创建了一个假数据主义者。在输入焦点上，在输入元素旁边附加伪数据主义者（ul元素）。它的位置设置为绝对位置，因此它不应该在出现时破坏文档的流量。但是，确实如此。我似乎无法确定问题所在。一旦出现数据列表，表格旁边的div就会被推下。当数据列表出现时，表格宽度不会改变，因此它不会使div缩小并将其向下推。

Code Pen

＆＃13;

＆＃13;

var artists = [{"artist":"3 Doors Down"},{"artist":"5 Seconds of Summer"},{"artist":"Adele"},{"artist":"Alicia Keys"},{"artist":"Amanda Abizaid"},{"artist":"Avril Lavigne"}];
var albums = [{"album":"The Better Life","year":"2000","cover":"3_doors_down_2000_the_better_life.jpg"},{"album":"Away from the Sun","year":"2002","cover":"3_doors_down_2002_away_from_the_sun.jpg"},{"album":"Seventeen Days","year":"2005","cover":"3_doors_down_2005_seventeen_days.jpg"},{"album":"3 Doors Down","year":"2008","cover":"3_doors_down_2008_3_doors_down.jpg"},{"album":"Time of My Life","year":"2011","cover":"3_doors_down_2011_time_of_my_life.jpg"}];
var songs = [{"song":"Kryptonite","track_no":"1"},{"song":"Duck and Run","track_no":"3"},{"song":"Be Like That","track_no":"5"},{"song":"So I Need You","track_no":"11"}];

function datalist(element) {
  return new datalist.prototype.init(element);
}
datalist.prototype = {
  init: function(element) {
    if (!element) {
      this.element = document.createElement("ul");
      this.element.classList.add("datalist");;
      this.hide();
    } else {
      this.element = element;
    }
  },
  update: function(queryElement) {
    this.clear();
    var lookUpArray = queryElement.name + "s";
    var results = this.search(window[lookUpArray], queryElement.value, queryElement.name);
    for (var i = 0; i < results.length; i++) {
      var li = document.createElement("li");
      var value = results[i][queryElement.name];
      switch (queryElement.name) {
        case "album":
          li.setAttribute("data-year", results[i].year);
          break;
        case "song":
          li.setAttribute("data-track_no", results[i].track_no);
          break;
      }
      if (queryElement.value != "") {
        var re = new RegExp(queryElement.value, "gi");
        value = value.replace(re, "<span class=\"highlight\">" + "$&" + "</span>");
      }
      li.innerHTML = value;
      this.element.appendChild(li);
    }
    return results.length;
  },
  search: function(lookUpArray, string, queryType) {
    var results = [];
    for (var i = 0; i < lookUpArray.length; i++) {
      if (lookUpArray[i][queryType].toLowerCase().search(string.toLowerCase()) != -1) {
        results.push(lookUpArray[i]);
      }
    }
    return results;
  },
  clear: function() {
    this.element.innerHTML = "";
  },
  hide: function() {
    this.element.style.display = "none";
  },
  show: function() {
    this.element.style.display = "";
  },
  remove: function() {
    this.element.parentElement.removeChild(this.element);
  },
  for: function(sibling) {
    sibling.parentElement.appendChild(this.element);
    this.hide();
  },
};
datalist.prototype.init.prototype = datalist.prototype;

var lastVisitedInput = null;

$("#lyrics-form").on("focus", "input.datalist-input", function() {
  if (this.parentElement.children.length == 1) {
    this.parentElement.appendChild(datalist().element);
  }
  if (lastVisitedInput) {
    datalist(lastVisitedInput.nextElementSibling).hide();
  }
  lastVisitedInput = this;
  if (datalist(this.nextElementSibling).update(this)) {
    datalist(this.nextElementSibling).show();
  } else {
    datalist(this.nextElementSibling).hide();
  }
});

$(document).on("click", function(e) {
  if (lastVisitedInput) {
    var exceptions = getExceptions(lastVisitedInput);
    if (!contains(exceptions, e.target)) {
      datalist(lastVisitedInput.nextElementSibling).remove();
      lastVisitedInput = null;
    }
  }
});

$("#lyrics-form").on("input", "input.datalist-input", function() {
  if (datalist(this.nextElementSibling).update(this)) {
    datalist(this.nextElementSibling).show();
  } else {
    datalist(this.nextElementSibling).hide();
  }
});

$("#lyrics-form").on("click", "li", function() {
  this.parentElement.previousElementSibling.value = this.innerText;
  $(this.parentElement.previousElementSibling).trigger("input");
});

function getRecord(input) {
  var lookUpArray = window[input.name + "s"];
  for (var i = 0; i < lookUpArray.length; i++) {
    if (input.value == lookUpArray[i][input.name]) {
      return lookUpArray[i];
    }
  }
  return false;
}

function getExceptions(input) {
  var exceptions = [
    input,
    input.nextElementSibling,
  ];
  for (var i = 0; i < input.nextElementSibling.children.length; i++) {
    exceptions.push(input.nextElementSibling.children[i]);
  }
  return exceptions;
}

function contains(array, item) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] === item) {
      return true;
    }
  }
  return false;
}

＆＃13;

* { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } *, *:before, *:after { box-sizing: inherit; }  body { line-height: 1.5; font-family: sans-serif; }   input[type="button"], input[type="submit"] { cursor: pointer; } textarea, input[type="text"], input[type="search"], input[type="number"], input[type="password"] { border: 1px solid rgba(0,0,0,.2); padding: 4px; margin: 1px; }   table { border-collapse: collapse; border-spacing: 0; }
			
body {
  background-color: rgb(230, 230, 230);
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, .8);
  box-sizing: border-box;
}

#main {
  height: 500px;
  background: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .1);
  margin: 20px auto;
  display: table;
  padding: 20px;
}

#songInput {
  overflow: auto;
}

#songTable td {
  position: relative;
}

#songTable,
#coverDiv {
  float: left;
}

#coverDiv {
  margin-left: 20px;
}

#artist,
#album,
#song {
  width: 250px;
}

#artist {
  width: 300px;
  width: 100%;
}

#year,
#track_no {
  width: 70px;
}

#songTable td {
  padding-bottom: 20px;
}

#songTable td:first-child {
  padding-right: 10px;
}

#songTable .int-input {
  padding-left: 20px;
  padding-right: 10px;
}

#coverDiv > * {
  display: block;
}

#coverDiv img {
  width: 137px;
  height: 137px;
  border: 1px solid rgba(0, 0, 0, .2);
  margin: 1px;
}

#coverUpload {
  margin: 1px;
  margin-top: 10px;
  width: 250px;
}

#lyricsBox {
  width: 100%;
  height: 400px;
  margin-top: 15px;
}

#submit {
  width: 100%;
  margin-top: 15px;
}

.datalist {
  border: 1px solid silver;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  position: absolute;
  top: 32px;
  left: 1px;
  background: white;
  padding: 5px;
  max-height: 195px;
  width: 180px;
  width: 100%;
  overflow-y: scroll;
  z-index: 1000;
}

.datalist li {
  padding: 2px 5px;
  cursor: default;
}

.datalist li:hover {
  background: rgba(0, 0, 0, .05);
  color: black;
}

.datalist .highlight {
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <form action="addlyrics.php" id="lyrics-form" method="post" autocomplete="off" enctype="multipart/form-data">
    <div id="songInput">
      <table id="songTable">
        <tr>
          <td>Artist</td>
          <td colspan="3">
            <input type="search" name="artist" id="artist" class="datalist-input" placeholder="Artist" required />
          </td>
        </tr>
        <tr>
          <td>Album</td>
          <td>
            <input type="search" name="album" id="album" class="datalist-input" placeholder="Album" required />
          </td>
          <td class="int-input">Year</td>
          <td>
            <input type="number" name="year" id="year" class="input-num" placeholder="Year" required />
          </td>
        </tr>
        <tr>
          <td>Song</td>
          <td>
            <input type="search" name="song" id="song" class="datalist-input" placeholder="Name" required />
          </td>
          <td class="int-input">#</td>
          <td>
            <input type="number" name="track_no" id="track_no" class="input-num" placeholder="ID" required />
          </td>
        </tr>
      </table>
      <div id="coverDiv">
        <img src="covers/blank.gif" id="cover" />
        <input type="file" name="cover" id="coverUpload" accept="image/*" />
      </div>
    </div>
    <textarea name="lyrics" placeholder="Lyrics" id="lyricsBox" /></textarea>
    <input type="submit" id="submit" class="button" />
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从overflow: auto;删除#songInput，表格的父元素和div解决了问题。虽然，我不明白为什么父母的overflow: auto;会推动div。动态添加ul.datalist的位置设置为绝对，当它出现时，它唯一可能做的就是扩展表的高度，这不应该影响右边的div。