元素不动/

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 按顺序渲染，最后一条规则覆盖了前一条规则。

您还在媒体查询之外进行覆盖，媒体查询被写入以更改某些屏幕尺寸的布局，并且它是“响应式”的，因此您的样式需要进入桌面的最后一个媒体查询