Question

我想在页面的右下角放置一个图像（基本上是一个徽标）。我正在尝试使用TOP和LEFT。但是，这没有任何效果。而且，我不想做绝对定位而是相对定位。

P.S：我知道你可以使用 align = right 向右对齐。但是，还有一些东西可以与右下角对齐吗？

 <body style="height: 100vh; width: 100vw" background="images/background.jpg">
    .........
    <img src="images/logo.png" alt="logo" style="TOP:235px;LEFT:270px;">
 </body>

Answer 1

相对定位只会移动元素相对于当前布局定义的当前位置。

要修复与视口相关的，请使用修复定位

#ImSticky {
  position: fixed;
  bottom: 0;
  right: 0;
}

<img id="ImSticky" src="http://www.fillmurray.com/140/100" />

注意：

无论页面上的内容量如何，此元素都将保留在原位。滚动时，它不会向上或向下移动。因此，这可能不是您实际要求的。

注2：

定位是一种非常糟糕的网页布局方法。它极不灵活，有更好，更灵敏的选择。查看LearnLayout.com

Answer 2

嘿试试这个，它对我有用，它会在右边显示你的徽标底

<style type="text/css">
  .log
  {
    position:absolute;
    right:0;bottom:0;
  }

</style>
<div class="log">
  <img alt="mylogo" src="c1.png">
</div>

Answer 3

您可以使用position: fixed来放置相对于视口的元素。

＆＃13;

body {
  height: 100vh;
  width: 100vh;
  margin: 0;
}

.logo {
  position: fixed;
  bottom: 0;
  right: 0;
}

＆＃13;

<body>
    <img class="logo" src="images/logo.png" alt="logo">
 </body>

＆＃13;

如何将图像放在网页的某个位置？

3 个答案: