为什么我的按钮不能随着浏览器左右移动而上下移动

Question

https://codepen.io/oli-oli-oxen-free/pen/XExzQJ

.button{
  position: absolute;
  height:25px;
  width: 40px;
  top: 290px;
  left: 725px;
  right: -420px;
  bottom: -191px;
}

我试过弄乱填充和边距

Answer 1

看起来您正在对齐页面中心的所有内容，但是您将对齐页面左侧的725px按钮

你需要做的是按住按钮放置div，然后将text-align:center放在该div上：

＆＃13;

＆＃13;

myFunction = () => {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

＆＃13;

.Box {
  position: relative;
  margin: auto;
  display: block;
  border: solid 4px skyBlue;
  margin-top: 2%;
  width: 600px;
  height: 450px;
  background: none;
  z-index: -1
}

.tittle {
  text-align: center;
  font-family: 'courier new', Courier, monospace;
}

.speech-buble-top {
  position: relative;
  display: block;
  border: solid 4px black;
  top: -15%;
  left: ;
  width: 200px;
  height: 100px;
  background: white;
  border-radius: 50%;
  text-align: center
}

#h3 {
  position: absolute;
  text-align: center;
  vertical-align: center;
  width: 90%;
  height: 80%;
  left: 10px;
  font-size: 25px;
  background: none;
  border: none;
  border-radius: 5px;
}

.speech-buble-bottom {
  position: relative;
  display: triangle;
  border-right: solid 4px black;
  border-bottom: solid 4px black;
  top: -23.5%;
  left: 30%;
  width: 15px;
  height: 20px;
  background: white;
  z-index: 1;
  transform: rotate(13deg);
}

.balloon-1 {
  position: absolute;
  top: -2%;
  left: 70%;
  width: 100px;
  height: 110px;
  background: red;
  border-radius: 50%;
  z-index: 1;
}

.balloon-bottom-1 {
  position: absolute;
  top: 22%;
  left: 76%;
  height: 0;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: transparent;
  border-bottom: 15px solid red;
  z-inedx: 1;
}

.balloon-string-1 {
  position: absolute;
  top: 29.5%;
  left: 69%;
  width: 80px;
  height: 20px;
  border: solid 6px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  border-radius: 50%;
  border-right: solid 5px black;
  transform: rotate(100deg);
  z-inedx: -1;
}

.balloon-2 {
  position: absolute;
  top: -8%;
  left: 75%;
  width: 100px;
  height: 110px;
  background: #228B22;
  border-radius: 50%;
  z-index: -1;
}

.balloon-string-2 {
  position: absolute;
  top: 26%;
  left: 69%;
  width: 110px;
  height: 20px;
  border: solid 6px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  border-radius: 50%;
  border-right: solid 5px black;
  transform: rotate(115deg);
  z-inedx: -1;
}

.balloon-3 {
  position: absolute;
  top: -4%;
  left: 78%;
  width: 100px;
  height: 110px;
  background: #9400D3;
  border-radius: 50%;
  z-index: -1;
}

.balloon-bottom-3 {
  position: absolute;
  top: 20%;
  left: 84%;
  height: 0;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: transparent;
  border-bottom: 15px solid #9400D3;
}

.balloon-string-3 {
  position: absolute;
  top: 29%;
  left: 71%;
  width: 110px;
  height: 20px;
  border: solid 6px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  border-radius: 50%;
  border-right: solid 5px black;
  transform: rotate(120deg);
  z-inedx: -1;
}

.balloon-4 {
  position: absolute;
  top: -2%;
  left: 85%;
  width: 100px;
  height: 110px;
  background: #FFD700;
  border-radius: 50%;
  z-index: 1;
}

.balloon-bottom-4 {
  position: absolute;
  top: 22%;
  left: 91%;
  height: 0;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: transparent;
  border-bottom: 15px solid #FFD700;
}

.balloon-string-4 {
  position: absolute;
  top: 29.5%;
  left: 73%;
  width: 130px;
  height: 20px;
  border: solid 6px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  border-radius: 50%;
  border-right: solid 5px black;
  transform: rotate(140deg);
  z-inedx: -1;
}

.head {
  position: absolute;
  top: 5%;
  left: 40%;
  width: 125px;
  height: 135px;
  background: pink;
  border-radius: 5px;
}

.l-lash-1 {
  position: absolute;
  top: 10%;
  left: 28%;
  width: 3%;
  height: 8%;
  background: black;
  transform: rotate(-50deg)
}

.l-lash-2 {
  position: absolute;
  top: 8%;
  left: 30%;
  width: 3%;
  height: 8%;
  background: black;
  transform: rotate(-30deg)
}

.l-lash-3 {
  position: absolute;
  top: 8%;
  left: 33%;
  width: 3%;
  height: 6%;
  background: black;
  transform: rotate(-20deg)
}

.r-lash-1 {
  position: absolute;
  top: 10%;
  left: 75%;
  width: 3%;
  height: 8%;
  background: black;
  transform: rotate(50deg)
}

.r-lash-2 {
  position: absolute;
  top: 8%;
  left: 73%;
  width: 3%;
  height: 8%;
  background: black;
  transform: rotate(30deg)
}

.r-lash-3 {
  position: absolute;
  top: 8%;
  left: 70%;
  width: 3%;
  height: 6%;
  background: black;
  transform: rotate(20deg)
}

.eye-left {
  position: absolute;
  top: 15px;
  left: 35px;
  width: 30px;
  height: 50px;
  background: white;
  border-radius: 50%;
  border-left: solid 3px lightGrey;
}

.eye-right {
  position: absolute;
  top: 15px;
  left: 66px;
  width: 30px;
  height: 50px;
  background: white;
  border-radius: 5px;
  border-radius: 50%;
  border-left: solid 3px lightGrey;
}

.inner-eye-left {
  position: absolute;
  top: 15%;
  left: 19%;
  width: 42%;
  height: 45%;
  background: black;
  border-radius: 50%;
  border-left: solid 9px darkOliveGreen;
  border-top: solid 9px darkOliveGreen;
  border-bottom: solid 9px darkOliveGreen;
}

.inner-eye-right {
  position: absolute;
  top: 15%;
  left: 0%;
  width: 42%;
  height: 45%;
  background: black;
  border-radius: 50%;
  border-left: solid 9px darkOliveGreen;
  border-top: solid 9px darkOliveGreen;
  border-bottom: solid 9px darkOliveGreen;
}

.pupil-left {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 42%;
  height: 35%;
  background: white;
  border-radius: 50%;
}

.pupil-right {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 35%;
  height: 30%;
  background: white;
  border-radius: 50%;
}

.hair-left {
  position: absolute;
  top: -25%;
  left: 45%;
  width: 5%;
  height: 30%;
  background: pink;
  transform: rotate(-30deg)
}

.hair-right {
  position: absolute;
  top: -18%;
  left: 60%;
  width: 5%;
  height: 25%;
  background: pink;
  transform: rotate(30deg)
}

.hair-top-left {
  position: absolute;
  top: -30%;
  left: 32%;
  width: 15%;
  height: 13%;
  background: pink;
  border-radius: 50%;
}

.hair-top-right {
  position: absolute;
  top: -25%;
  left: 65%;
  width: 15%;
  height: 13%;
  background: pink;
  border-radius: 50%;
}

.mouth-top {
  position: absolute;
  top: 60%;
  left: 29%;
  width: 50%;
  height: 17%;
  background: pink;
  border-radius: 50%;
  z-index: 1;
}

.mouth {
  position: absolute;
  top: 61%;
  left: 29%;
  width: 50%;
  height: 17%;
  background: none;
  border-radius: 50%;
  border-bottom: solid 4px black;
}

.ear-bar-1 {
  position: absolute;
  top: 34%;
  left: -9%;
  width: 120%;
  height: 31%;
  background: lightGrey;
  z-index: -1;
}

.ear-bar-2 {
  position: absolute;
  top: 40%;
  left: -18%;
  width: 140%;
  height: 19%;
  background: pink;
  z-index: -2;
}

.ear-bar-3 {
  position: absolute;
  top: 45%;
  left: -25%;
  width: 155%;
  height: 10%;
  background: lightGrey;
  z-index: -3;
}

.ear-left-circle {
  position: absolute;
  top: 41%;
  left: -37%;
  width: 17%;
  height: 17%;
  background: pink;
  border-radius: 50%
}

.ear-right-circle {
  position: absolute;
  top: 41%;
  left: 125%;
  width: 17%;
  height: 17%;
  background: pink;
  border-radius: 50%
}

.neck {
  position: absolute;
  top: 100%;
  left: 26.5%;
  width: 50%;
  height: 12%;
  background: lightGrey;
  border-radius: 5px
}

.button-holder {
  position: absolute;
  height: 25px;
  top: 290px;
  left: 0;
  width:100%;
  text-align: center;
}

.upper-body {
  position: absolute;
  top: 110%;
  left: -15%;
  width: 130%;
  height: 125%;
  background: pink;
  border-radius: 5px;
  z-index: +1
}

.bullet-1 {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 8%;
  height: 8%;
  background: lightGrey;
  border-radius: 50%
}

.bullet-2 {
  position: absolute;
  top: 5%;
  left: 88%;
  width: 8%;
  height: 8%;
  background: lightGrey;
  border-radius: 50%
}

.bullet-3 {
  position: absolute;
  top: 88%;
  left: 5%;
  width: 8%;
  height: 8%;
  background: lightGrey;
  border-radius: 50%
}

.bullet-4 {
  position: absolute;
  top: 88%;
  left: 88%;
  width: 8%;
  height: 8%;
  background: lightGrey;
  border-radius: 50%
}

.heart-left {
  position: absolute;
  top: 20%;
  left: 68%;
  width: 8%;
  height: 15%;
  background: red;
  border-radius: 50%;
  transform: rotate(-25deg)
}

.heart-right {
  position: absolute;
  top: 20%;
  left: 72%;
  width: 8%;
  height: 15%;
  background: red;
  border-radius: 50%;
  transform: rotate(25deg)
}

.hand-left {
  position: absolute;
  top: 132%;
  left: -85%;
  width: 80%;
  height: 20%;
  background: pink;
  transform: rotate(30deg);
  z-index: -1;
}

.hand-right {
  position: absolute;
  top: 132%;
  left: 100%;
  width: 80%;
  height: 20%;
  background: pink;
  transform: rotate(-35deg);
  z-index: 1;
}

.h-line-1 {
  position: absolute;
  top: 34%;
  left: 1%;
  width: 35%;
  height: 38%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.h-line-2 {
  position: absolute;
  top: 34%;
  left: 20%;
  width: 35%;
  height: 38%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.h-line-3 {
  position: absolute;
  top: 34%;
  left: 40%;
  width: 35%;
  height: 38%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.h-line-4 {
  position: absolute;
  top: 34%;
  left: 60%;
  width: 35%;
  height: 38%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.palm-left {
  position: absolute;
  top: 0%;
  left: -30%;
  width: 42%;
  height: 60%;
  background: none;
  border-top: solid 14px lightGrey;
  border-radius: 50%;
  transform: rotate(90deg);
}

.palm-right {
  position: absolute;
  top: 0%;
  left: 85%;
  width: 42%;
  height: 60%;
  background: none;
  border-top: solid 14px lightGrey;
  border-radius: 50%;
  transform: rotate(270deg);
}

.left-leg {
  position: absolute;
  top: 235%;
  left: 0%;
  width: 35%;
  height: 80%;
  background: pink;
  z-index: -1;
}

.right-leg {
  position: absolute;
  top: 235%;
  left: 68%;
  width: 35%;
  height: 80%;
  background: pink;
  z-index: -1;
}

.l-line-1 {
  position: absolute;
  top: 0%;
  left: 37%;
  width: 25%;
  height: 50%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.l-line-2 {
  position: absolute;
  top: 20%;
  left: 37%;
  width: 25%;
  height: 50%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: 1;
}

.l-line-3 {
  position: absolute;
  top: 40%;
  left: 37%;
  width: 25%;
  height: 50%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: 1;
}

.shoe-left {
  position: absolute;
  top: 90%;
  left: -10%;
  width: 120%;
  height: 20%;
  background: none;
  border-top: solid 18px lightGrey;
  border-radius: 50%;
  z-index: +1
}

.shoe-right {
  position: absolute;
  top: 90%;
  left: -10%;
  width: 120%;
  height: 20%;
  background: none;
  border-top: solid 18px lightGrey;
  border-radius: 50%;
  z-index: +1
}

＆＃13;

<h1 class="tittle">Robot</h1>
<div class="button-holder"><button class="button" onclick="myFunction()">Click Me</button></div>
<div class="Box">
  <div class="speech-buble-top">
    <div id="myDIV" style="display: none">
      <h3 id="h3"> Happy Birthday Tiffany!</h3>
    </div>
  </div>
  <div class="speech-buble-bottom"></div>

  <div class="balloon-1"></div>
  <div class="balloon-2"></div>
  <div class="balloon-3"></div>
  <div class="balloon-4"></div>
  <div class="balloon-bottom-1"></div>
  <div class="balloon-bottom-3"></div>
  <div class="balloon-bottom-4"></div>
  <div class="balloon-string-1"></div>
  <div class="balloon-string-2"></div>
  <div class="balloon-string-3"></div>
  <div class="balloon-string-4"></div>

  <div class="head">

    <div class="eye-left">
      <div class="inner-eye-left"></div>
      <div class="pupil-left"></div>
    </div>
    <div class="eye-right">
      <div class="inner-eye-right"></div>
      <div class="pupil-right"></div>
    </div>

    <div class="l-lash-1"></div>
    <div class="l-lash-2"></div>
    <div class="l-lash-3"></div>

    <div class="r-lash-1"></div>
    <div class="r-lash-2"></div>
    <div class="r-lash-3"></div>

    <div class="hair-left"></div>
    <div class="hair-right"></div>
    <div class="hair-top-left"></div>
    <div class="hair-top-right"></div>

    <div class="mouth-top"></div>
    <div class="mouth"></div>

    <div class="ear-bar-1"></div>
    <div class="ear-bar-2"></div>
    <div class="ear-bar-3"></div>

    <div class="ear-left-circle"></div>
    <div class="ear-right-circle"></div>

    <div class="neck"></div>
    <div class="upper-body">


      <div class="bullet-1"></div>
      <div class="bullet-2"></div>
      <div class="bullet-3"></div>
      <div class="bullet-4"></div>
      <div class="heart-left"></div>
      <div class="heart-right"></div>
      <div class="bullet-center"></div>
    </div>

    <div class="hand-left">
      <div class="h-line-1"></div>
      <div class="h-line-2"></div>
      <div class="h-line-3"></div>
      <div class="h-line-4"></div>
      <div class="palm-left"></div>
    </div>

    <div class="hand-right">
      <div class="h-line-1"></div>
      <div class="h-line-2"></div>
      <div class="h-line-3"></div>
      <div class="h-line-4"></div>
      <div class="palm-right"></div>
    </div>

    <div class="left-leg">
      <div class="l-line-1"></div>
      <div class="l-line-2"></div>
      <div class="l-line-3"></div>
      <div class="shoe-left"></div>
    </div>

    <div class="right-leg">
      <div class="l-line-1"></div>
      <div class="l-line-2"></div>
      <div class="l-line-3"></div>
      <div class="shoe-right"></div>
    </div>

  </div>
  <!--end of head-->

</div>

＆＃13;

＆＃13;

＆＃13;

在上面，我为你的div添加了一类按钮。删除了css for button并为新div添加了css