Question

我正在练习建立一个网站。在网站上：http://auchevaldiner.com/new-york/，您可以看到徽标在左下角，当您滚动时，它会与您一起滚动，以使其能够正常工作？

我的代码

body {
  margin: 0px;
}

.Main {
  font-size: 0px;
}

.mtx {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 5em;
  color: black;
  left: 550px;
}

.logo_float {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 200px;
  z-index: 1000;
}

<!DOCtype HTML>

<head>
  <html lang="en">
  <meta charset="utf-8">
  <link rel="stylesheet" href="AU.css">
  <title>Au Cheval</title>
  <link rel="stylesheet" href="au.css">
  <link rel="shortcut icon" type="image/jpg" href="favicon.jpg">

</head>

<body>

  <div class="Main">
    <img src="au.images/au.jpg" width="1423px" height="950px" />
    <img src="au.images/au2.jpg" width="1423px" height="950px" />
    <img src="au.images/au3.jpg" width="1423px" height="950px" />
    <img src="au.images/au4.jpg" width="1423px" height="950px" />
    <img src="au.images/au5.jpg" width="1423px" height="950px" />
    <img src="au.images/au6.jpg" width="1423px" height="950px" />
    <img src="au.images/au7.jpg" width="1423px" height="950px" />
    <img src="au.images/au8.jpg" width="1423px" height="950px" />
    <img src="au.images/au9.jpg" width="1423px" height="950px" />
    <img src="au.images/au10.jpg" width="1423px" height="950px" />
    <img src="au.images/au11.jpg" width="1423px" height="950px" />
  </div>

  <a href="AU.html" class="logo_float">
    <img src="au.images/au12.jpg" width="200px" height="200px">
  </a>

</body>

</html>

这是我在滚动时试图滚动的内容 <a href="AU.html" class="logo_float" >

Answer 1

您给它position: fixed，然后将其放在左下角，即left: 0; bottom: 0。

https://developer.mozilla.org/en-US/docs/Web/CSS/position

如何使徽标随着滚动而滚动？

1 个答案: