用边距顶部定位图像

Question

在这个页面http://lafon.atelier47.fr/domaines-interventions上，我需要使用边距顶部的圆圈来定位图像，在大型桌面上定位是可以的，但是当屏幕较小时，定位就不确定了。也许有一个使用css、javascript或jquery的解决方案？

我的守则：

#qx-image-4919 {
    margin-top: -25%;   
}

Answer 1

这里最好的选择是使用媒体查询。我不知道你想在哪个阶段开始。有几种方法可以设置媒体查询。尝试将其粘贴到CSS中：

@media (max-width: 600px) {
  #qx-image-4919 {
    margin-top: -25%; // your position when the screen is max 600px or smaller  
  }
}

Answer 2

使用媒体查询将图像的css值(在您的例子中是margin-top)更改为您想要的任何值。

@media (max-width:1200px){

    #qx-image-4919 {
        margin-top: -70%;   
    }

}

这将将所有小于1200像素的设备屏幕的边缘顶部更改为-70%。

请参阅有关媒体查询的更多信息：

mediaquery.asp

Answer 3

先试

!important

否则，更改css代码而不是%；尝试使用px

喜欢

margin-top: -200px !important;