CSS类随窗口大小调整而移动

时间：2018-10-10 14:06:23

标签： html css css3

我正在为一些学生建立门户，但是每次他们调整浏览器窗口的大小时，CSS类都会四处移动。

我已经坚持了几天，我认为我花太多时间只是想弄清楚这部分。

enter image description here

我将代码放在帖子中，并附加了背景图片。是否有某些CSS规则可以使浏览器移动时CSS类不会移动？

谢谢！

这是CSS和HTML代码：

.google-container {
  overflow: hidden;
  bottom: 2070px;
  left: 350px;
  padding-top: 56.25%;
  position: relative;
}

.java-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.java-container iframe {
  border: 0;
  height: 400%;
  right: 400px;
  position: absolute;
  top: 200px;
  width: 100%;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 1538px;
  position: absolute;
  top: 180px;
  width: 100%;
}

.sutori {
  position: absolute;
  bottom: 1878px;
  left: 422px;
  background-color: #33afff;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  padding: 20px;
  width: 240px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.sutori:hover,
.sutori:focus {
  background-color: #d3d3d3;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  bottom: 1825px;
  left: 260px;
  background-color: #d3d3d3;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.drivebutton {
  position: absolute;
  bottom: 510px;
  left: 1190px;
  background-color: #d54b3d;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.drivebutton:hover,
.drivebutton:focus {
  background-color: #d3d3d3;
}

.drivebutton:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.drivebutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.drivebutton-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.drivebutton:hover,
.drivebutton:focus {
  background-color: #d3d3d3;
}

.drivebutton a:hover {
  background-color: #ddd;
}

.classroombutton {
  position: absolute;
  bottom: 385px;
  left: 1190px;
  background-color: #d54b3d;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.classroombutton:hover,
.classroombutton:focus {
  background-color: #d3d3d3;
}

.classroombutton:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.classroombutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.classroombutton-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.classroombutton:hover,
.classroombutton:focus {
  background-color: #d3d3d3;
}

.classroombutton a:hover {
  background-color: #ddd;
}

.youtubebutton {
  position: absolute;
  bottom: 295px;
  left: 1190px;
  background-color: #d54b3d;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.youtubebutton:hover,
.youtubebutton:focus {
  background-color: #d3d3d3;
}

.youtubebutton:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.youtubebutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.youtubebutton-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.youtubebutton:hover,
.youtubebutton:focus {
  background-color: #d3d3d3;
}

.youtubebutton a:hover {
  background-color: #ddd;
}

.conbutton {
  position: absolute;
  bottom: 512px;
  left: 816px;
  background-color: #daa520;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.conbutton:hover,
.mailbutton:focus {
  background-color: #d3d3d3;
}

.conbutton:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.conbutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.conbutton-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.conbutton:hover,
.mailbutton:focus {
  background-color: #d3d3d3;
}

.conbutton a:hover {
  background-color: #ddd;
}

.mailbutton {
  position: absolute;
  bottom: 600px;
  left: 1190px;
  background-color: #d54b3d;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.mailbutton:hover,
.mailbutton:focus {
  background-color: #d3d3d3;
}

.mailbutton:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.mailbutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.mailbutton-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.mailbutton:hover,
.mailbutton:focus {
  background-color: #d3d3d3;
}

.mailbutton a:hover {
  background-color: #ddd;
}

.button {
  position: absolute;
  bottom: 450px;
  left: 570px;
  background-color: #33afff;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.button:hover,
.button:focus {
  background-color: #000000;
}

.buttonflip {
  position: absolute;
  bottom: 510px;
  left: 430px;
  background-color: #18d71f;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.buttonflip:hover,
.buttonflip:focus {
  background-color: #d3d3d3;
}

.buttonflip:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.buttonflip:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.buttonflip-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.buttonflip:hover,
.buttonflip:focus {
  background-color: #d3d3d3;
}

.buttonflip a:hover {
  background-color: #ddd;
}

.sketchfabbutton {
  position: absolute;
  bottom: 295px;
  left: 1190px;
  background-color: #d54b3d;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.sketchfabbutton:hover,
.sketchfabbutton:focus {
  background-color: #d3d3d3;
}

.sketchfabbutton:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.sketchfabbutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.sketchfabbutton-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sketchfabbutton:hover,
.sketchfabbutton:focus {
  background-color: #d3d3d3;
}

.sketchfabbutton a:hover {
  background-color: #ddd;
}

.sketchbutton {
  position: absolute;
  bottom: 385px;
  left: 430px;
  background-color: #107014;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.sketchbutton:hover,
.sketchbutton:focus {
  background-color: #d3d3d3;
}

.sketchbutton:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.sketchbutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.sketchbutton-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sketchbutton:hover,
.sketchbutton:focus {
  background-color: #d3d3d3;
}

.sketchbutton a:hover {
  background-color: #ddd;
}

.eastbutton {
  position: absolute;
  bottom: 629px;
  left: 816px;
  background-color: #0091b2;
  border: none;
  font-size: 28px;
  font-family: "Arial";
  color: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.2s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.eastbutton:hover,
.eastbutton:focus {
  background-color: #d3d3d3;
}

.eastbutton:after {
  content: "";
  background: #000000;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.4s
}

.eastbutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.eastbutton-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.eastbutton:hover,
.eastbutton:focus {
  background-color: #d3d3d3;
}

.eastbutton a:hover {
  background-color: #ddd;
}

body {
  background-image: url("backtest2.png");
  background-repeat: no-repeat;
  background-position: right 400% bottom 101%;
  background-size: 1920px 1000px;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>EAST Portal!</title>
  <div class="iframe-container">
    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FEAST-at-Gentry-Public-Schools-405756842946474%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
      width="340" height="500" style="border:none;overflow:hidden;" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
  </div>

  <body scroll="no" style="overflow: hidden">
    <div class="google-container" <center>
      <form method="GET" action="https://www.google.com/search">
        <a href="https://www.google.com/search?safe=vss">
          <img src="https://www.edigitalagency.com.au/wp-content/uploads/google-logo-png-transparent-background-large-new-800x270.png" border="0" alt="Google" width="115" height="39" align="absmiddle"></a><br>
        <input type="text" name="q" size="15" maxlength="255" value="" style="width:220px;height:40px;font-size:12px;border-style:solid; border-width:1px;">
        <input type="submit" name="sa" value="Search" style="width:100px;height:40px;font-size:18px; padding-top:-20;"><input type="hidden" name="safe" value="strict">
        </td>
        </tr>
        </tbody>
        </table>
      </form>
      </center>
    </div>


    <style>
      p {
        position: fixed;
        bottom: 750px;
        left: 1200px;
        font-size: 34px;
        font-family: "Arial";
        margin-top: 5px;
      }
    </style>
</head>

<body>



  <div class="dropdown">
    <button onclick="myFunction()" class="sutori">Sutori</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="https://www.sutori.com/">Sutori</a>
      <a href="https://www.sutori.com/story/east-gentry-public-schools-2018-19">EAST Sutori</a>
      <a href="https://www.sutori.com/story/photography-club-2018-19">Photography Club</a>
    </div>
  </div>

  </head>

  <body>







    <a href="https://www.flipgrid.com" <button class="buttonflip">Flipgrid</button> </a>
    <a href="https://mail.google.com" <button class="mailbutton">Gmail</button> </a>
    <a href="https://drive.google.com" <button class="drivebutton">Google Drive</button> </a>
    <a href="https://classroom.google.com" <button class="classroombutton">Google Classroom</button></a>
    <a href="https://www.eastinitiative.org/" <button class="eastbutton">EAST</button></a>
    <a href="https://sites.google.com/gentrypioneers.com/digital-nature-museum/home" <button class="sketchbutton">Digital Nature Museum</button></a>
    <a href="https://1drv.ms/x/s!AlirjV-w8OlNgdFMUjpT953SL8PlBw" <button class="conbutton">Conference Sign-up Sheet</button></a>
    <a href="https://www.youtube.com" <button class="youtubebutton">YouTube</button></a>
    <a href="https://www.youtube.com" <button class="buttonsketch">YouTube</button></a>



  </body>

</html>

0 个答案:

没有答案
相关问题
最新问题