Question

我试图在我的背景图像上以固定位置获取我的5个字体真棒图标。这个固定的位置应该允许我滚动它以解决任何问题。我知道有一种方法，但我找不到它。

我的HTML：

    <!--Kaffe abschnitt -->
    <!--5 Icons-->
<ul>
    <li><a href="#"><i class="fa fa-cog fa-5x"></i></a></li>
    <li><a href="#"><i class="fa fa-rebel fa-5x"></i></a></li>
    <li><a href="#"><i class="fa fa-empire fa-5x"></i></a></li>
    <li><a href="#"><i class="fa fa-twitch fa-5x"></i> </a></li>
    <li><a href="#"><i class="fa fa-steam fa-5x"></i> </a></li>
</ul>
    <!--Ende 5 Icons-->
    <!--Hintergrund-->
    <img src="img/bild2.png" class="container-full">
    <!--Ende Kaffe abschnitt -->

后台CSS：

.container-full {
  margin: 0 auto;
  width: 100%;
  z-index: -999;
}

Icon CSS：

 ul li {
        list-style-type: none;
        float: left;
    } 
ul li a span {
    background: transparent;
    color: #205D7A;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 2px solid;

    text-align: center;
    transition: all 0.2s ease-in-out;
    z-index: 998;
}
ul li a span:hover {
    opacity: .8;
}

我不是要求预制的完整代码。只是动作的名称或一些短代码狙击。

Answer 1

我试图在我的背景图像上以固定位置获取我的5个字体真棒图标。

如果您想要滚过它们，则不想使用'position：fixed'。相反，使用position：absolute。

绝对将根据除“position：static”之外的任何东西的第一个父元素定位元素，我建议在父元素上设置“position：relative”，你希望你的元素根据它自己定位。

如果你希望你的“图标”位于div的右侧，那么它看起来就像这样

#myDiv{position:relative;} //the container

.myIcons{position:absolute; right:0} //a handy class on all your icons spans/i

.icon1{top:0px} //these are just unique classes per icon
.icon2{top:20px}
.icon3{top:40px}

希望这能让你朝着正确的方向前进

图像上方的图标+ y轴定位

1 个答案: