Html 为什么我的导航按钮在我没有'；你不能把它设为绝对值吗？

基本上，我想做一个导航按钮，当你把它悬停时，它会变成一个十字

问题是，它几乎完美地工作，但只有当我将“Position:absolute”应用于三行的容器时。但当我不这样做时，它就会全部中断，三条线就会从布局中消失。为什么?

以下是css代码：

ul{
显示器：flex；
弯曲方向：立柱；
}
a{
文字装饰：无；
}
.图标{
位置：绝对位置；
利润率：50像素；
}
.icon div{
字体大小：粗体；
过渡：0.3s；
字号：5em；
线高：10px；
}
.图标：悬停分区：第n个子项（3）{
变换：旋转（45度）；
}
.图标：悬停分区：第n个子项（1）{
变换：旋转（-45度）平移（-40%，100%）
}
.图标：悬停分区：第n个子项（2）{
不透明度：0；
}

文件
⎯
⎯
⎯

您必须将

图标

div设置为

显示：内联块

试着在代码的div周围加一个边框，你会看到它占据了所有的宽度-

margin:50px

，因为默认情况下，

div

s在块中显示。这意味着当你旋转它时，它会旋转，因为它的中心在页面的中心，所以旋转会占用更多的空间，这就是为什么看起来他们在散步

我建议在测试时使用背景或边框，以便更好地了解情况

这是代码。我添加了一些类，这样更容易阅读

ul{
显示器：flex；
弯曲方向：立柱；
}
a{
文字装饰：无；
}
.图标{
填充：10px；
利润率：50像素；
显示：内联块；
}
.线路{
字体大小：粗体；
过渡：0.3s；
字号：5em；
线高：10px；
}
.icon:hover>.line-one{
变换：旋转（-45度）平移（-40%，100%）；
}
.icon:hover>第二行{
不透明度：0；
}
.icon:hover>.line三{
变换：旋转（45度）；
}

文件
⎯
⎯
⎯

@RolandStarke这很有帮助！但我还是不明白为什么。