为什么我的导航按钮在我未将其设置为绝对时会脱离布局？

Question

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

问题是它工作得几乎完美，但只有当我将“位置：绝对”应用于三行的容器时。但是当我不这样做时，一切都会中断，三行就会脱离布局。为什么？

这里是 css 代码：

ul {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

.icon {
    position: absolute;
    margin: 50px;
}

.icon div {
    font-weight: bold;
    transition: 0.3s;
    font-size: 5em;
    line-height: 10px;
}

.icon:hover div:nth-child(3) {
    transform: rotate(45deg);
}

.icon:hover div:nth-child(1) {
    transform: rotate(-45deg) translate(-40%, 100%)
}

.icon:hover div:nth-child(2) {
    opacity: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Styles/Nav.css">
</head>
<body>
    <nav>
        <div class="icon">
            <div class="line">⎯</div>
            <div class="line">⎯</div>
            <div class="line">⎯</div>
        </div>
        <ul>
            <li>
                <a href="">Home</a>
            </li>
            <li>
                <a href="">Navigation</a>
            </li>
            <li>
                <a href="">Next</a>
            </li>
            <li>
                <a href="">Something</a>
            </li>
        </ul>
    </nav>
</body>
</html>

但没有 position: absolute 到 .icon，看看会发生什么：

ul {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

.icon {
    margin: 50px;
}

.icon div {
    font-weight: bold;
    transition: 0.3s;
    font-size: 5em;
    line-height: 10px;
}

.icon:hover div:nth-child(3) {
    transform: rotate(45deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Styles/Nav.css">
</head>
<body>
    <nav>
        <div class="icon">
            <div class="line">⎯</div>
            <div class="line">⎯</div>
            <div class="line">⎯</div>
        </div>
        <ul>
            <li>
                <a href="">Home</a>
            </li>
            <li>
                <a href="">Navigation</a>
            </li>
            <li>
                <a href="">Next</a>
            </li>
            <li>
                <a href="">Something</a>
            </li>
        </ul>
    </nav>
</body>
</html>

为什么？将容器设置为非正常流程与这种奇怪的行为有什么关系？

Answer 1

您必须将 icon div 设置为 display: inline-block。

尝试在代码的 div 周围放置一个边框，您会看到它占据了所有宽度 - margin: 50px 因为 divs 默认情况下显示为块。这意味着当您旋转它时，它会以页面中心为中心旋转，因此旋转会占用更多空间space，这就是为什么看起来他们正在散步。

我建议在测试时使用背景或边框，这样您可以更好地了解发生了什么。

这里是代码。我添加了一些类以便于阅读。

ul {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
}

.icon {
  padding: 10px;
  margin: 50px;
  display: inline-block;
}

.line {
  font-weight: bold;
  transition: 0.3s;
  font-size: 5em;
  line-height: 10px;
}

.icon:hover > .line-one {
  transform: rotate(-45deg) translate(-40%, 100%);
}

.icon:hover > .line-two {
  opacity: 0;
}

.icon:hover > .line-three {
  transform: rotate(45deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <div class="icon">
            <div class="line line-one">⎯</div>
            <div class="line line-two">⎯</div>
            <div class="line line-three">⎯</div>
        </div>
        <ul>
            <li>
                <a href="">Home</a>
            </li>
            <li>
                <a href="">Navigation</a>
            </li>
            <li>
                <a href="">Next</a>
            </li>
            <li>
                <a href="">Something</a>
            </li>
        </ul>
    </nav>
</body>
</html>

为什么我的导航按钮在我未将其设置为绝对时会脱离布局？

Why my nav button gets out of the layout when I don't set it to absolute?

html

css

layout

css-position

css-animations