gpt4 book ai didi

html - 为什么 align-self 属性在使用 flex 时不适用于导航栏?

转载 作者:搜寻专家 更新时间:2023-10-31 08:38:56 26 4
gpt4 key购买 nike

这应该是一个粘性导航栏,但永远不会变粘。我读到我必须使用 align-self: flex-start; 来解决 flex 的这个问题,但遗憾的是我没有这样做。

body { padding-bottom: 2000px;}
ul { list-style: none;}

.wrap {
position: sticky;
position: -webkit-sticky;
top: 0;
align-self: flex-start;
}
.nav-bar {
display: flex;
flex-direction: row;
justify-content: flex-end;
background-color: #00aae4;
margin-bottom: 0;
padding-right: 30px;
height: 50px;
margin-top:0;
}
.nav-link {
padding-left: 0;
padding-right: 0;
background-color: #f1f1f1;
width: 100px;
text-align: center;
font-size: 20px;
margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav class="wrap">
<ul class="nav-bar">
<li class="nav-link">Luigis</li>
<li class="nav-link">Menu</li>
<li class="nav-link">Acerca de </li>
<li class="nav-link">Contacto</li>
</ul>
</nav>
</body>
</html>

我已经尝试将 align-self 属性位置更改为 ul 的设置并使用了 top。还尝试通过将 div 与 classes 一起使用来消除列表,但仍然没有结果。

最佳答案

来自 the specification :

Intersection between the stickily positioned element and the bottom of the sticky-constraint rectangle limits movement in any direction, so the offset never pushes the stickily positioned element outside of its containing block. However, when the element is free to move within its containing block as the page is scrolled, it appears to be pinned to the relevant flow root edges, similarly to a fixed position element.

默认情况下,您的元素包含在内容框而不是填充框中,在您的情况下,内容框由粘性元素定义,因此如果您添加大填充,则不会出现粘性行为。

如果你增加一个很大的高度来增加内容框,你可能会有粘性行为。

body {
height: 2000px;
}

ul {
list-style: none;
}

.wrap {
position: sticky;
position: -webkit-sticky;
top: 0;
}

.nav-bar {
display: flex;
flex-direction: row;
justify-content: flex-end;
background-color: #00aae4;
margin-bottom: 0;
padding-right: 30px;
height: 50px;
margin-top: 0;
}

.nav-link {
padding-left: 0;
padding-right: 0;
background-color: #f1f1f1;
width: 100px;
text-align: center;
font-size: 20px;
margin-top: 5px;
}
<nav class="wrap">
<ul class="nav-bar">
<li class="nav-link">Luigis</li>
<li class="nav-link">Menu</li>
<li class="nav-link">Acerca de </li>
<li class="nav-link">Contacto</li>
</ul>
</nav>

  1. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box. ref

您可能对作为填充框的绝对定位元素的包含 block 感到困惑:

  1. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

    1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
    2. Otherwise, the containing block is formed by the padding edge of the ancestor.

关于html - 为什么 align-self 属性在使用 flex 时不适用于导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56364091/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com