Question

我已经写了这个网站几天了，我的徽标位置遇到了麻烦。无论我尝试多少，我似乎无法移动它。谁能建议我怎么做？ PS。（我还在学习CSS。）

HTML：

<div class="logofx">
<a href="index.html"> <img src="images\logo.png"> </a>
</div>

CSS：

.logofx img {

top:300px;
left:50px;

-webkit-transition: all 5s ease;
-moz-transition: all 5s ease;
-o-transition: all 5s ease;
-ms-transition: all 5s ease;
transition: all 5s ease;          
}

.logofx img:hover {
-webkit-filter: hue-rotate(333deg);

}

Answer 1

您需要position:relative，position:absolute或position:fixed（具体取决于具体的效果*）。

默认情况下，元素包含position:static，静态定位的元素不受left/top/right/bottom调整的影响。

*效果：

position:relative按指定的数量移动元素，但其他元素的行为类似于未移动的元素。如果您还希望其他元素移动，请考虑使用margin属性。
position:absolute移动元素相对于最近的position:relative容器（或整个文档，如果没有）放置。
position:fixed使用left/top作为坐标修复了浏览器窗口中的元素。

Answer 2

设置position: fixed

.logofx img {
  position: fixed;
  top:300px;
  left:50px;

  -webkit-transition: all 5s ease;
  -moz-transition: all 5s ease;
  -o-transition: all 5s ease;
  -ms-transition: all 5s ease;
  transition: all 5s ease;          
}

Answer 3

取而代之的是保证金呢？

    .logofx img {
    margin:300px 0 0 50px;
    display:block;
    -webkit-transition: all 5s ease;
    -moz-transition: all 5s ease;
    -o-transition: all 5s ease;
    -ms-transition: all 5s ease;
    transition: all 5s ease;          
    }

Answer 4

HTML：

<div class="logo"><div class="logofx">
<a href="index.html"> <img src="images\logo.png"> </a>
</div>
</div>

CSS：

.logo{position:relative;}
.logofx{position:absolute; top:10px; left:10px;}

尝试使用此代码可以帮助您。将顶部和左侧放在正确的像素上，或使用顶部和左侧属性移动到您想要的位置。

我无法在我的网站上移动徽标

4 个答案: