元素不动/

Question

我试图将这个不和谐小部件移动到左角，但由于某种原因，我不能。我对网络开发还很陌生，这是我第一次尝试响应式网站，所以很抱歉我犯了一些愚蠢的错误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%;

  }

}

Answer 1

 .contact{     position: relative;     width: 20.4%;     height: 280px;     right: 200px; }这段代码几乎就是css的最后一段了。这将包含小部件的 div 设置为 20% 宽，距右侧 200px。您试图覆盖上面的它，但 css 按顺序渲染，最后一条规则覆盖了前一条规则。您还在媒体查询之外进行覆盖，媒体查询被写入以更改某些屏幕尺寸的布局，并且它是“响应式”的，因此您的样式需要进入桌面的最后一个媒体查询