Question

我要做的是将<input>放在<div>的内部。 div用position: absolute;定位，而我试图用position: relative;定位输入。问题是，当我使用position: relative;时，输入不会到达div的底部。它正在与position: absolute;一起使用，但是我不想要那样。这是一个代码段和codepen。

var $c = $('.game');
var ctx = $c[0].getContext('2d');
/*Console stuff*/
{
  var $console = $('.console');
  var console = {
    log: function(txt) {
      $console.append(txt + '<br>');
    },
    clear: function() {
      $console.text(' ');
    }
  };

  $(function() {
    $console.hide();
  });
  var bKeys = [];

  $('body').keydown(function(e) {
    if (bKeys.includes(e.which) === false) {
      bKeys.push(e.which);
    }
    console.log(bKeys);
  });

  $('body').keyup(function(e) {
    bKeys.pop(e.which);
  });

  setInterval(function() {
    if (bKeys.includes(18) && bKeys.includes(67)) {
      $console.toggle();
    }
  }, 150);
}

.game {
  background-color: #f1f1f1;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 50px;
}

.console {
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: #fff;
  width: 300px;
  height: 100%;
  box-shadow: 0px 0px 5px #444;
  overflow-y: auto;
}

.run {
  position: relative;
  bottom: 0px;
  width: 295px;
}

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Use Alt+C to open the console; the that isn't working is there :)<canvas class='game' width='700' height='400'></canvas>
  <div class='console'><input class='run' type='text' placeholder='I want this to be position at the bottom' />Console: <br> </div>

谢谢！

Answer 1

没关系，我使用了position: fixed;并成功了。感谢尝试提供帮助的人！

在div内相对HTML HTML CSS定位输入

1 个答案: