元素不动

Question

我正在尝试将此 discord 小部件移到左下角，但出于某种原因，我不能。我是网络开发的新手，这是我第一次尝试响应式网站，所以很抱歉我犯了一些愚蠢的错误 xd 我试过摆弄位置类型和显示以及所有这些，但没有真正找到问题所在。

CSS:

body{
  background-image: url("background.jpg");
  background-size: cover;
  background-attachment: fixed;
}


/* contact */
.contact{
  position: relative;
  bottom: 80px;
  left: 15px;
  padding: 0;
  margin: 10 5 50 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1);
  border-radius: 5px;
}
/* tablet */
@media only screen and (min-width: 768px) {
  .profile{
    position: relative;
    width: 100%;
    left: 10%;
  }

  .about__me{
    position: relative;
    width: 100%;
    left: 10%;
  }

  .contact{
    position: relative;
    width: 100%;
    left: 40%;
  }

  .somw{
    position: relative;
    width: 125%;
  }

  .somw__content{
    position: relative;
    width: 95%;
    left: 5%;
  }
}

/* Desktop */
@media screen and (min-width: 1000px) {
    /*profile picture
  ----------------------------------------------*/
  .profile{
    position: static;
    width: 700px;
    height: 200px;
    right: 100%;
  }

  .about__me{
    position: relative;
    width: 700px;
    left: 541px;
    bottom: 90px;
  }

  .contact{
    position: relative;
    width: 20.4%;
    height: 280px;
    right: 200px;
  }

  .somw{
    width: 10%;
  }
}

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
    <title>Custom Profile Page</title>
  </head>
  <body>
    <!-- contact -->
    <div class="contact">
      <div class="contact__content">
        <iframe src="https://discordapp.com/widget?id=675446555901165568&theme=dark" width="370" height="300" allowtransparency="true" frameborder="0"></iframe>
      </div>
    </div>
  </body>
</html>

Answer 1

 .contact{
    position: relative;
    width: 20.4%;
    height: 280px;
    right: 200px;
}

这段代码几乎是css的最后一位。这是将包含小部件的 div 设置为 20% 宽，距离右侧 200px。

您正试图在上面覆盖它，但 css 按顺序呈现，最后一条规则覆盖了前面的规则。

你也在媒体查询之外覆盖，媒体查询是为了改变某些屏幕尺寸的布局而写的，它是如何“响应”的，所以你的风格需要进入桌面的最后一个媒体查询

元素不动

Element not moving

html

css

responsive