如何将图像与页面的上边距对齐答案

【问题标题】：How do I align an image to the top margin of page如何将图像与页面的上边距对齐
【发布时间】：2016-12-12 22:23:54
【问题描述】：

我正在使用 wordpress 作为 CMS 完成一个网页。我的客户要求我在页面的最顶部放置一个图像/按钮。与主导航菜单对齐。

没关系，我做到了，但发生的事情是这样的：当我使用不同的屏幕分辨率时，按钮不会与页面的最顶部保持对齐

我尝试使用“Position:fixed”，但是这样，按钮会随着页面移动，我希望它们保持在页面顶部并且不要滚动与页面。

我该怎么做？有人能帮我吗？谢谢！！！

.buttons {
  position: absolute;
left: 85%;
z-index:905;
margin-top:0
}
.buttonLang {
  position: relative;
z-index: 910;
     }
.buttonZone {
  position: relative;
z-index: 915;
top: -107px;
left: 100px;
}
.selectLang {
  display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,1);
}
#buttonLang:hover img {
  opacity: 1;
}
.dropdown {
  position: relative;
display: inline-block;
}
.dropdown-content {
  display: none;
position: absolute;
background-color: /*#2893CC;
*/#FFFFFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
padding: 12px 16px;
z-index: 1;
font-family: Calibri;
    }
.dropdown:hover .dropdown-content {
  display: block;
line-height: 200%;
}

  </head>
  <body>
<body bgcolor="#E1E1E1">
<div class="buttons">
<div class="buttonLang">
  <div class="dropdown">
<img src="http://www.jourdan.org.br/wp-content/uploads/button-lang.png" alt="" title=""/>
    <div class="dropdown-content">
     <a href="http://localhost/"><img src="http://localhost/wp-content/uploads/2016/10/flag-bra.png" width="30"alt="" title=""/> Português</br></a>
     <a href="http://localhost/empresa-esp/"><img src="http://localhost/wp-content/uploads/2016/10/flag-esp.png" width="30"alt="" title=""/> Español</br></a>
     <a href="http://localhost/company/"><img src="http://localhost/wp-content/uploads/2016/10/flag-usa.png" width="30"alt="" title=""/> English</a>
    </div>
  </div>
</div>


<div class="buttonZone">
 	<a href="http://localhost/sgv-zone/"><img src="http://www.jourdan.org.br/wp-content/uploads/button-sgvzone.png" alt="" title=""/></a>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

【问题讨论】：

您可以发布指向您网站的链接吗？
它只是在“本地主机” ....=/
大家好！我刚刚将网站上传到网络服务器。它在这里：www.gncshop.com.ar/portal/ 因为我使用的是全高清显示器，所以按钮出现在正确的位置。但是如果我使用分辨率较低（1366x768）的显示器，一半的图像会隐藏在上边缘谢谢！

标签： html css wordpress

【解决方案1】：

将此添加到您的 CSS：

.post > .post-content > .wpb_row > .wpb_column {
    position: static;
}
.buttons {
    position: absolute;
    right: 10%;
    top: 0;
    z-index: 905;
    margin-top: 0px;
}

但是我不明白您为什么不将按钮 HTML 移动到标题中。当您调整浏览器大小时，按钮会与导航重叠，这无法通过几行 CSS 来纠正。

【讨论】：

那么成功了吗？如果您接受并支持我的回答，那就太好了，谢谢
是的！！！！非常感谢大佬！！！现在，即使我调整浏览器的大小，这两个按钮仍然与上边距对齐，很抱歉给您带来的不便，因为我的回复延迟（我昨天从楼梯上摔下来了，哈哈哈......甚至没有看到你的答案，今天才看到。）和所有的麻烦。再次感谢！你很棒！ CSS魔法的黑暗艺术大师！ :P
欢迎您，我很高兴能为您提供帮助。感谢您的赞美 :-) 如果您有时间和心情，也许您考虑传播有关我在个人资料开头发布的链接的信息？通常我不问，但我例外;-)

【解决方案2】：

改用position: absolute;。 top: 0px; 也应该让它卡在那里。

【讨论】：

我已经试过了......这就是我得到的：.buttons { position: absolute;左：85%； z-索引：905；边距顶部：自动 } .buttonLang { 位置：相对； z指数：910； } .buttonZone { 位置：相对； z 指数：915；顶部：-113px；左：100px； }
^ 我没有看到 .buttons { top: 0px; } 在其中的任何地方。尝试在您的问题本身中发布一个最小的可复制示例。
对不起...我试图复制页面的示例...这是问题所在：因为我正在使用 wordpress...我在帖子或页面中插入的任何代码都只是开始在主导航下方
我尝试做“位置：固定”...但是它会随着页面滚动...但是当我位于页面顶部时的位置是正确的...我可以以某种方式做“位置：固定”但使其“静态”与页面顶部对齐吗？谢谢
或者向下滚动时隐藏？

【解决方案3】：

body{position :relative;} .button{position:absolute;顶部：0px；左：10px;}

【讨论】：

【解决方案4】：

将它们对齐到右侧而不是左侧:)

.buttons {
    position: absolute;
    right: 10%; /* for example, adjust how you need */
    z-index:905;
    margin-top:0
}

【讨论】：

它也没有用。这是我的问题的一个明显例子。无论页面分辨率或页面本身的边距如何，我都需要页面右侧的这两个按钮/图像与页面顶部对齐......为了让它卡在页面的顶部，使用一个“gambiarra”我将页面内容的边距设置为“-250px”......在全高清显示器中，没关系。在像 1366x768 这样的分辨率上，它超过了上限。（在巴西，我们使用“gambiarra”这个术语来表达一个不是真正解决方案的问题的解决方案）所以....还有其他人吗？
“其他人”是什么意思？
也帮助我！哈哈哈，但你也可以继续努力帮助......拜托！ :P
你对那些利用空闲时间来解决你的问题的人非常“友善”;-)
天哪！来吧！我不是故意粗鲁的。如果我似乎不顾你的帮助，我很抱歉，但我不是。我只是想变得，你知道，“有趣”……在巴西，我们有一种奇怪的幽默感……呵呵……所以……你能帮帮我吗？然而？请漂亮！ :D 如果你说是，这里是一个没有“gambiarras”的页面的链接....gncshop.com.ar/portal/sgas-plus-124（愿上帝仁慈地触动你的心！:P）页面中间的那两个按钮是我想要的保持与页面顶部对齐。再次感谢！