输入标签和按钮不在div类中的固定位置

时间：2020-03-04 18:08:33

标签： php html css

我正在为我和我的朋友在学校创建此聊天页面，并且遇到此问题：当我在家里有电脑时，我调整窗口大小以测试不同的分辨率时（1920x1080），Chromebook的宽度为1400，然后是我的500宽手机。

在调整窗口大小时，我正努力将按钮固定在聊天框的右上角，而在重新调整窗口时，聊天输入框会上下移动，而我希望将其固定在Windows中的聊天框下方中心。

这是我的代码：

@import url(https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap);

/* ===============================
            MAIN SHIT
================================== */

textarea {
  top: 50px;
  height: 350px;
  resize: none;
  border: 3px solid black;
  padding: 5px;
  font-family: Tahoma, sans-serif;
}

body {
  margin: 0;
  background: rgb(195, 55, 100);
  background: linear-gradient(137deg, rgba(195, 55, 100, 1) 29%, rgba(114, 47, 106, 1) 53%, rgba(29, 38, 113, 1) 100%);
}

input {
  background-color: #27292E;
  color: white;
  border-radius: 5px;
  border-width: 1px;
  border: 2px solid #5f5f5f;
  font-family: "Roboto", sans-serif;
  width: 70%;
  margin: 0px 0px 5px;
  padding: 5px;
  font-size: 13px;
  height: 40px;
}

input[type="text"],
input[type="password"] {
  border: 2px solid #AAAAAA;
  margin: .5em 0 2em 0;
  max-width: 100%;
  outline: none;
  height: 3.5em;
  padding: 1em;
  width: 70%;
}

#masthead-index {
  height: 350px;
}

input {
  width: 150px;
  margin: 0px 5px;
}

.button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 20px;
  border: none;
  width: 50%;
}

body {
  font-family: 'Roboto', sans-serif;
  color: white;
  background-size: auto;
  background-repeat: repeat-y;
  background-attachment: fixed;
}

img {
  max-width: 900px;
  max-height: 400px;
}


/*  CHAT */

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.message_title {
  color: white;
  font-size: 25px;
}

.message_small {
  color: #353b48;
  font-size: 15px;
}


/* ===============================
         FOR MY PC (1920x1080)
================================== */

@media screen and (min-width: 1450px) {
  .chat-box {
    position: fixed;
    margin-top: 25%;
    margin-left: 5%;
  }
  .chatButtons {
    color: white;
    font-size: 15px;
    top: 31%;
    padding: 10px 20px;
    margin: 0px 10px;
    position: fixed;
    margin-left: 51%;
  }
  .content-page {
    top: 30%;
    overflow: scroll;
    overflow-x: hidden;
    border-radius: 10px;
    width: 70%;
    height: 500px;
    padding: 15px 20px;
    margin: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    text-align: left;
    position: absolute;
    right: 0;
    left: 0;
    background-color: #0E283F;
    /*  background-color: rgba(64,115,158, 1); */
  }
}


/* ===============================
    IPHONE (7 plus - my phone)
================================== */

@media screen and (max-width: 800px) {
  .content-page {
    top: 35%;
    overflow: scroll;
    overflow-x: hidden;
    border-radius: 10px;
    width: 90%;
    height: 500px;
    padding: 10px;
    margin: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    text-align: left;
    position: absolute;
    right: 0;
    left: 0;
    background-color: #0E283F;
  }
  #chatbox {
    font-size: 20px;
  }
  .chatButtons {
    display: none;
  }
  .chat-box {
    margin-top: 78%;
  }
}


/* ===============================
         chrome book
================================== */

@media screen and (max-width: 1450px) {
  .content-page {
    top: 38%;
    overflow: scroll;
    overflow-x: hidden;
    border-radius: 10px;
    width: 70%;
    height: 350px;
    padding: 10px;
    margin: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    text-align: left;
    position: absolute;
    right: 0;
    left: 0;
    background-color: #0E283F;
    /*  background-color: rgba(64,115,158, 1); */
  }
  .chat-box {
    margin-top: 36%;
    padding: 0px;
    margin-left: 6%;
    margin-bottom: 0px;
  }
  .chatButtons {
    color: white;
    font-size: 15px;
    top: 10%;
    padding: 10px 20px;
    margin: 0px 10px;
    margin-left: 40%;
  }
}


/* OTHER STUFF */

.center,
#masthead .inner,
#masthead-index .inner,
#masthead-contact .inner,
#masthead-website_hosting .inner,
#masthead-minecraft_hosting .inner,
#masthead #pricing-plans,
#masthead-index #pricing-plans,
#masthead-contact #pricing-plans,
#masthead-website_hosting #pricing-plans,
#masthead-minecraft_hosting #pricing-plans,
#masthead #minecraft-pricing-plans,
#masthead-index #minecraft-pricing-plans,
#masthead-contact #minecraft-pricing-plans,
#masthead-website_hosting #minecraft-pricing-plans,
#masthead-minecraft_hosting #minecraft-pricing-plans,
#masthead #dedicated-pricing-plans,
#masthead-index #dedicated-pricing-plans,
#masthead-contact #dedicated-pricing-plans,
#masthead-website_hosting #dedicated-pricing-plans,
#masthead-minecraft_hosting #dedicated-pricing-plans {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: relative;
  left: 50%;
  top: 50%;
}


/* ===========================================
                Masthead
============================================ */

#masthead,
#masthead-index,
#masthead-contact,
#masthead-website_hosting,
#masthead-minecraft_hosting {
  margin-top: -122px;
  height: 340px;
  z-index: -999;
}

#masthead .inner,
#masthead-index .inner,
#masthead-contact .inner,
#masthead-website_hosting .inner,
#masthead-minecraft_hosting .inner,
#masthead #pricing-plans,
#masthead-index #pricing-plans,
#masthead-contact #pricing-plans,
#masthead-website_hosting #pricing-plans,
#masthead-minecraft_hosting #pricing-plans,
#masthead #minecraft-pricing-plans,
#masthead-index #minecraft-pricing-plans,
#masthead-contact #minecraft-pricing-plans,
#masthead-website_hosting #minecraft-pricing-plans,
#masthead-minecraft_hosting #minecraft-pricing-plans,
#masthead #dedicated-pricing-plans,
#masthead-index #dedicated-pricing-plans,
#masthead-contact #dedicated-pricing-plans,
#masthead-website_hosting #dedicated-pricing-plans,
#masthead-minecraft_hosting #dedicated-pricing-plans {
  margin: 0;
}

#masthead .inner h1,
#masthead-index .inner h1,
#masthead-contact .inner h1,
#masthead-website_hosting .inner h1,
#masthead-minecraft_hosting .inner h1,
#masthead #pricing-plans h1,
#masthead-index #pricing-plans h1,
#masthead-contact #pricing-plans h1,
#masthead-website_hosting #pricing-plans h1,
#masthead-minecraft_hosting #pricing-plans h1,
#masthead #minecraft-pricing-plans h1,
#masthead-index #minecraft-pricing-plans h1,
#masthead-contact #minecraft-pricing-plans h1,
#masthead-website_hosting #minecraft-pricing-plans h1,
#masthead-minecraft_hosting #minecraft-pricing-plans h1,
#masthead #dedicated-pricing-plans h1,
#masthead-index #dedicated-pricing-plans h1,
#masthead-contact #dedicated-pricing-plans h1,
#masthead-website_hosting #dedicated-pricing-plans h1,
#masthead-minecraft_hosting #dedicated-pricing-plans h1,
#masthead .inner h4,
#masthead-index .inner h4,
#masthead-contact .inner h4,
#masthead-website_hosting .inner h4,
#masthead-minecraft_hosting .inner h4,
#masthead #pricing-plans h4,
#masthead-index #pricing-plans h4,
#masthead-contact #pricing-plans h4,
#masthead-website_hosting #pricing-plans h4,
#masthead-minecraft_hosting #pricing-plans h4,
#masthead #minecraft-pricing-plans h4,
#masthead-index #minecraft-pricing-plans h4,
#masthead-contact #minecraft-pricing-plans h4,
#masthead-website_hosting #minecraft-pricing-plans h4,
#masthead-minecraft_hosting #minecraft-pricing-plans h4,
#masthead #dedicated-pricing-plans h4,
#masthead-index #dedicated-pricing-plans h4,
#masthead-contact #dedicated-pricing-plans h4,
#masthead-website_hosting #dedicated-pricing-plans h4,
#masthead-minecraft_hosting #dedicated-pricing-plans h4 {
  color: #FFFFFF;
}

#masthead .inner h1,
#masthead-index .inner h1,
#masthead-contact .inner h1,
#masthead-website_hosting .inner h1,
#masthead-minecraft_hosting .inner h1,
#masthead #pricing-plans h1,
#masthead-index #pricing-plans h1,
#masthead-contact #pricing-plans h1,
#masthead-website_hosting #pricing-plans h1,
#masthead-minecraft_hosting #pricing-plans h1,
#masthead #minecraft-pricing-plans h1,
#masthead-index #minecraft-pricing-plans h1,
#masthead-contact #minecraft-pricing-plans h1,
#masthead-website_hosting #minecraft-pricing-plans h1,
#masthead-minecraft_hosting #minecraft-pricing-plans h1,
#masthead #dedicated-pricing-plans h1,
#masthead-index #dedicated-pricing-plans h1,
#masthead-contact #dedicated-pricing-plans h1,
#masthead-website_hosting #dedicated-pricing-plans h1,
#masthead-minecraft_hosting #dedicated-pricing-plans h1 {
  text-transform: uppercase;
  padding-top: 100px;
}


/* ===========================================
                Basic Styles
============================================ */

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

.clearfix:before,
.clearfix:before {
  display: table;
  content: " ";
}

.container,
.inner,
#pricing-plans,
#minecraft-pricing-plans,
#dedicated-pricing-plans {
  margin: 0 auto;
  width: 85%;
}

@media (min-width: 700px) {
  .container,
  .inner,
  #pricing-plans,
  #minecraft-pricing-plans,
  #dedicated-pricing-plans {
    width: 90%;
  }
}

.inner-narrow {
  padding: 40px 0;
  margin: 0 auto;
  width: 85%;
}

@media (min-width: 700px) {
  .inner-narrow {
    width: 60%;
  }
}

.alert,
.notice {
  text-align: center;
}

.center,
#masthead .inner,
#masthead-index .inner,
#masthead-contact .inner,
#masthead-website_hosting .inner,
#masthead-minecraft_hosting .inner,
#masthead #pricing-plans,
#masthead-index #pricing-plans,
#masthead-contact #pricing-plans,
#masthead-website_hosting #pricing-plans,
#masthead-minecraft_hosting #pricing-plans,
#masthead #minecraft-pricing-plans,
#masthead-index #minecraft-pricing-plans,
#masthead-contact #minecraft-pricing-plans,
#masthead-website_hosting #minecraft-pricing-plans,
#masthead-minecraft_hosting #minecraft-pricing-plans,
#masthead #dedicated-pricing-plans,
#masthead-index #dedicated-pricing-plans,
#masthead-contact #dedicated-pricing-plans,
#masthead-website_hosting #dedicated-pricing-plans,
#masthead-minecraft_hosting #dedicated-pricing-plans {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: relative;
  left: 50%;
  top: 50%;
}

.clearfix:after {
  clear: both;
}

.text-center,
.title,
div.title,
.title-left,
#masthead .inner,
#masthead-index .inner,
#masthead-contact .inner,
#masthead-website_hosting .inner,
#masthead-minecraft_hosting .inner,
#masthead #pricing-plans,
#masthead-index #pricing-plans,
#masthead-contact #pricing-plans,
#masthead-website_hosting #pricing-plans,
#masthead-minecraft_hosting #pricing-plans,
#masthead #minecraft-pricing-plans,
#masthead-index #minecraft-pricing-plans,
#masthead-contact #minecraft-pricing-plans,
#masthead-website_hosting #minecraft-pricing-plans,
#masthead-minecraft_hosting #minecraft-pricing-plans,
#masthead #dedicated-pricing-plans,
#masthead-index #dedicated-pricing-plans,
#masthead-contact #dedicated-pricing-plans,
#masthead-website_hosting #dedicated-pricing-plans,
#masthead-minecraft_hosting #dedicated-pricing-plans,
.block,
#about,
#features,
.support-ticket,
#pricing-plans,
#minecraft-pricing-plans,
#dedicated-pricing-plans {
  text-align: center;
}

.bold,
a,
.title,
div.title,
.title-left {
  font-weight: bold;
}

.hidden {
  display: none;
}

.opacity {
  opacity: 0;
}

p {
  color: #AAAAAA;
  line-height: 1.5;
  font-size: 16px;
  margin: 0;
}

a {
  text-decoration: none;
  color: #1DB2E3;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}


/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


/* ===========================================
                Buttons
============================================ */

.button,
.button-primary {
  border-radius: 100px;
  font-weight: normal;
  padding: 15px 30px;
  border: 0;
}

.button-primary {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
  -webkit-transition: 700ms background ease-in-out;
  transition: 700ms background ease-in-out;
  background: #1DB2E3;
  color: #FFFFFF;
}

.button-primary:hover {
  background: #333E4F;
}


/* ===========================================
                    Forms
============================================ */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea {
  border: 2px solid #AAAAAA;
  margin: .5em 0 2em 0;
  max-width: 100%;
  outline: none;
  height: 3.5em;
  padding: 1em;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: #1DB2E3;
}

input[type='number'] {
  height: 3.5em;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

textarea {
  max-height: 20em;
  resize: none;
  height: 20em;
}


/* ===========================================
            Main Navigation
============================================ */

#main-navigation {
  background: rgba(0, 0, 0, 0.25);
  min-height: 90px;
  z-index: 999;
}

#main-navigation .navigation-left {
  padding: 37px 0;
  float: left;
}

#main-navigation .navigation-left a.logo {
  text-transform: uppercase;
  font-size: 30px;
  color: #FFFFFF;
}

#main-navigation .navigation-left a.logo img {
  margin-top: 0px;
  height: 60px;
}

#main-navigation .hamburger-menu {
  height: 20px;
  position: absolute;
  width: 30px;
  margin: auto;
  right: -70%;
  bottom: 0;
  left: 0;
  top: 0;
}

#main-navigation .bar,
#main-navigation .bar:after,
#main-navigation .bar:before {
  height: 2px;
  width: 30px;
}

#main-navigation .bar {
  -webkit-transform: translateY(9px);
  transform: translateY(9px);
  background: white;
  -webkit-transition: all 0ms 300ms;
  transition: all 0ms 300ms;
  position: relative;
}

#main-navigation .bar.animate {
  background: rgba(255, 255, 255, 0);
}

#main-navigation .bar:before {
  -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  background: white;
  bottom: 9px;
  position: absolute;
  content: "";
  left: 0;
}

#main-navigation .bar:after {
  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  background: white;
  position: absolute;
  top: 9px;
  content: "";
  left: 0;
}

#main-navigation .bar.animate:before {
  -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  bottom: 0;
}

#main-navigation .bar.animate:after {
  -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
}

#main-navigation .navigation-right {
  padding: 37px 0;
  display: none;
  float: right;
}

#main-navigation .navigation-right .item {
  font-weight: normal;
  margin-right: 15px;
  color: #FFFFFF;
}

@media (min-width: 480px) {
  #main-navigation .navigation-right {
    display: block;
  }
  #main-navigation .hamburger-menu {
    display: none;
  }
}

.navigation-right.active {
  display: block !important;
  background: transparent;
  position: absolute;
  margin-top: 90px;
  height: 352px;
  z-index: 999;
  width: 100%;
  left: 0;
  top: 0;
}

.navigation-right.active a {
  text-align: center;
  padding: 16px 0;
  display: block;
}

.navigation-right.active .button-primary {
  margin: 0 auto;
  width: 70%;
}


/*!
Animated
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}


/* ====================
        IPHONE
=======================*/

@media screen and (max-width: 500px) {
  #main-navigation .hamburger-menu {
    height: 20px;
    position: absolute;
    width: 30px;
    margin: auto;
    right: -70%;
    bottom: 0;
    left: 0;
    margin-top: 10%;
  }
  #main-navigation .navigation-right {
    padding: 37px 0;
    display: none;
    float: right;
    background: #4a4a4a;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>MopedBoyz</title>
  <link rel="icon" href="img/mopedIcon.ico">
  <link rel="stylesheet" href="css/navbar.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="js/nav.js"></script>
</head>

<body>

  <div id="main-navigation" class="animated bounceInDown">
    <div class="inner">
      <div class="navigation-left">
        <a href="index.php" class="logo bold">MopedBoyz</a>
      </div>
      <div class="hamburger-menu">
        <div class="bar"></div>
      </div>

      <div class="navigation-right">
        <a href="index.php" class="item">Links</a><a href="chat.php" class="item">  Global Chat</a><a href="messages.php" class="item">Messages</a>
        <a href="accountOptions.php" class="item">Settings</a><a href="sys/logout.php" class="button-primary">Log Out</a></div>

    </div>
  </div>

</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/chat.css" />

<script src="js/chat.js"></script>
<div class="flex-center position-ref full-height">
  <div id="masthead-index">
    <div class="inner">
      <h1><b>MopedBoyz - Chat</b></h1>
      <h4>Do <span class="bold">whatever</span> you want on here.</h4>
    </div>
  </div>
</div>

<script>
  var input = document.getElementById("onpress");
  input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      document.getElementById("onpress").chatScroll();
    }
  });
</script>

<div class="content-page" id="chat-page">
  <div style="position: absolute">
    <p class="chatButtons"><input type="submit" name="Submit" value="Load More Chats" onclick="chatLoad();" />
      <input type="submit" name="Submit" value="Reset chat" onclick="resetChat();"> </p>
    <div id="chatbox">

      Loading...
    </div>
    <br>
  </div>
  <div class="chat-box">
    <form action="sys/chat.php" method="post">
      <input type="text" name="message" maxlength="500" placeholder="Enter message here" style="box-sizing:border-box; width:60%; position: fixed;" autocomplete="off" onclick="chatScroll();" />
      <input type="submit" value="Send" style="display:none" id="onpress" onclick="chatScroll();" />
    </form>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

除非您手动指定位置，否则

top: 50px;将不起作用。类似地，可以在代码中进行非常简单的修改。Learn more about CSS position property.对于媒体查询要更加具体。 尝试position: fixed使按钮保持在固定位置。 Learn more about Media Queries.

相关问题
最新问题