Question

我的页面页脚中包含一张图片。这是一个小徽标（现在使用占位符iamge）。我希望它位于页面底部的中间位置，所以当您将鼠标悬停在它上面时，它的头会全部看起来像可爱的一样。但是我无法设置其样式使其不位于页面底部一半，而是始终显示完整图像，而当我将鼠标悬停时，网页上的所有其他内容似乎都在上下移动。很难辨认，但这就是从将鼠标悬停到不悬停的样子：

1

2

现在它的样式仅仅是：

position: relative; top:75px; left:2%

Answer 1

这是您需要的吗？

body{
  padding: 0;
  margin: 0;
}
.content{
  width: 100vw;
  max-width: 100%;
  background: #4527a0;
  height: auto;
  position: relative;
  text-align: center;
}

.inner_content{
  max-width: 960px;
  text-align: left;
  display: inline-block;
  height: auto;
  color: white;
  line-height: 16px;
}

.imagecontent{
  position: absolute;
  display: block;
  z-index: 100;
  margin: 0;
  padding: 0;
  left: 1%;
  bottom:0%;
  width:120px;
  height: 170px;
  background: #cddc39;
  transform:translateY(85px);
  transition:all 380ms;
  margin-top: -170px;
}

.imagecontent:hover{
    transform:translateY(0px);
}

footer{
  width: 100%;
  display: inline-block;
  vertical-align: top;
  background-color: #afb42b;
  height: 200px;
  position:relative;
  overflow: hidden;
}

<div class="content">
  <div class="inner_content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nulla magna, ullamcorper eu metus quis, consequat facilisis nisi. Nullam rhoncus purus sed orci fermentum, et dictum dui consectetur. Duis imperdiet ultricies scelerisque. Aliquam erat volutpat. Praesent congue ex vel pulvinar porta. Fusce rutrum ut odio vitae placerat. Fusce lobortis nec tortor et egestas. Phasellus lorem ligula, finibus ut est eget, interdum interdum ipsum. Vestibulum sed facilisis ipsum, sed lacinia neque.

Suspendisse aliquam magna mauris, in tempus leo consequat in. Morbi blandit turpis nec enim vulputate elementum. Cras magna libero, sodales vitae odio quis, pretium tempus quam. Quisque at purus sed felis viverra scelerisque et sollicitudin turpis. Sed vitae arcu eu massa efficitur blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sed erat faucibus, lacinia tortor quis, rhoncus odio. Proin laoreet justo ac magna blandit, id sollicitudin orci pellentesque. Curabitur ac augue eu nulla lobortis tincidunt. Praesent sed sollicitudin orci. In feugiat, ligula posuere commodo maximus, orci nibh elementum ante, ullamcorper consequat diam justo et risus. Aliquam vitae ultrices leo, sed ultrices enim. Morbi quis aliquam est. Morbi in arcu nisl. Curabitur volutpat aliquam eros a tristique.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam nec ex arcu. Donec sit amet sodales dolor, vitae porttitor nibh. Phasellus mauris tellus, bibendum non scelerisque et, ultrices sed nunc. Morbi tempor neque a massa feugiat, non tristique urna feugiat. Sed at metus hendrerit, feugiat augue eu, pretium urna. Suspendisse ut luctus ex. Aliquam dapibus nisl quis mi porta cursus. Nam placerat lacus in eros auctor pharetra. Phasellus at pulvinar eros, viverra ullamcorper erat. Nullam ac quam erat. Vivamus neque dolor, pulvinar sed lacus id, bibendum varius mauris. Donec ornare dolor sagittis, lobortis erat in, ullamcorper sapien. Nam pellentesque consequat ante eu sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam elit metus, dictum quis lectus et, hendrerit hendrerit felis.

Aliquam congue tortor quis enim porttitor, venenatis condimentum enim faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum eget facilisis ipsum, ut imperdiet metus. Praesent ornare lacinia eros, ut semper eros porttitor nec. Aenean condimentum egestas nisi ac placerat. Integer vulputate ultrices egestas. Donec maximus quam arcu, sed lobortis tellus consectetur id. Mauris accumsan libero eu diam interdum condimentum. Mauris cursus ligula in rutrum vestibulum. Donec sed varius eros, ut convallis dolor. Sed arcu sem, iaculis eleifend nunc sed, tincidunt hendrerit elit. Nullam sed imperdiet arcu. Nunc enim ante, pretium non eros id, porttitor vulputate sem. Nullam nec scelerisque sapien, id congue sapien. Ut pulvinar ac felis vitae lobortis. Aenean bibendum vulputate aliquam.
      <footer>
        <div class="imagecontent">              </div>   
     </footer>
      
  </div>
</div>

将图像部分置于页面底部之外

1 个答案: