后端开发教程 - Java、Spring Boot 实战 - msg200.com
CSS 速查：位置
什么是 CSS Quickes？
让我们谈谈position
结论
什么是 CSS Quickes？
我开始在 Instagram 上询问我喜爱的社区：“哪些 CSS 属性让您感到困惑？”
在“CSS Quickies”中，我将深入讲解一个 CSS 属性。这些属性是社区请求的。如果您也对某个 CSS 属性感到困惑，请在Instagram、Twitter或下方评论区留言！我会解答所有问题。
我也在twitch.tv上一边写代码一边直播。如果你想直接联系我！
让我们谈谈position
啊，CSS 中的定位元素。这通常不是 CSS 中最有趣的部分，但我们每个人都必须这样做。这就是为什么今天我们要稍微讨论一下这个position属性。
默认值：静态
无论是否设置，您的元素默认为静态。因此，它会遵循页面的正常流程。这意味着 HTML 元素的显示顺序与它们在 HTML 文件中的顺序相同。块元素将渲染到自己的新行中，如果内联元素可以放在同一行，则将渲染到行内元素中。当元素设置为静态时top，bottom、left和right属性无效。
.box {
position: static;
}
static
+--------+ +--------+ +--------+
| | | | | |
| | | | | |
| | | | | |
+--------+ +--------+ +--------+
相对的
相对属性会相对于元素的静态位置移动元素。想象一下，元素的左上角有一个大红点。现在，当您设置top和left属性时，浏览器会计算您设置的像素（或百分比），然后根据这些值移动元素。如果您设置bottom和，也会发生同样的情况right，但现在大红点在右下角。如果您碰巧在同一个元素中同时设置了两者，top则胜出bottom和left胜出right，但您应该坚持只使用其中一种。要么是top或，bottom要么是left或right。使用相对属性时，此元素在页面流中占用的原始空间仍将由此元素占据。
.box{
position: relative:
top: 100px;
left: 50px
}
relative
+--------+ +--+ +--------+
| | | | |
| | | | |
| | | | |
+--------+ | +--------+
↓
+-------+
| |
| |
+-------+
绝对
绝对位置的工作原理与相对位置类似，但也有不同之处。再次想象一下那个红点，但这次它的位置不是你应用它的元素，而是父元素。我们的逻辑与相对位置相同。唯一改变的是浏览器计算元素位置的位置。而且，现在这个元素占用的空间可以被其他元素占用。换句话说，这个元素脱离了正常的元素流，不占用空间。
.box {
position: absolute
top: 5px;
left: 5px;
}
absolute
parent↓
+-------------------------------------------------+
| |
| +--------+ |
| | | |
| | | |
| | +<--------------+ |
| +--------+ +---------+ | +---------+ |
| | | | | | |
| | | + | | |
| | | | | |
| +---------+ +---------+ |
| |
| |
| |
| |
+-------------------------------------------------+
固定的
固定元素有点像你用锤子把元素钉在浏览器窗口的某个位置，即使你尝试滚动，它也会停留在那里。它始终在你的屏幕上。好的，让我们更精确地解释一下。还记得之前的那个红点吗？现在，这个红点绑定在浏览器的四个角上。top: 0;并且left: 0;是你网站左上角的第一个像素。你能想象会bottom: 0;发生什么right: 0;吗？它的另一个功能fixed是，如果你滚动元素，它仍然会停留在你指定的位置；如果你没有指定任何位置，z-index它将位于其他元素的顶部。
.box {
position: fixed;
right: 10px;
top: 10px;
}
fixed
+---------------------------------------------------------------------------+
|webpage _ x |
+---------------------------------------------------------------------------+
| +----------+ |
| parent↓ +---------------------------->+ | |
| +-------------------------------------------------+ | | |
| | | | | | |
| | | | | | |
| | | | +----------+ |
| | | | |
| | +---------+ | +---------+ | |
| | | | | | | | |
| | | | + | | | |
| | | | | | | |
| | +---------+ +---------+ | |
| | | |
| | | |
| | | |
| | | |
| +-------------------------------------------------+ |
| |
| |
| |
| |
+---------------------------------------------------------------------------+
黏
sticky是一种相对较新的定位方法，各个浏览器都支持。如果您知道您的用户使用旧浏览器或不到 1% 类型的浏览器，并且移动浏览器难以使用这种定位方法，我不会推荐它。但是，粘性是如何工作的呢？首先，如果不滚动，粘性元素的定位就像静态元素一样。当您滚动时，奇迹就会发生！粘性元素将粘附在您使用top属性指定的位置！这就是为什么您需要设置top属性以使粘性工作的原因。您错过了红点，对吗？想象一下，红点是您查看页面的浏览器窗口视口的顶部。因此，如果设置top为零，您的 stick 元素将粘附在浏览器顶部，完全没有间隙。这对于粘性菜单很有用。如果您的设计需要间隙，请将像素数添加到 top 属性，然后就可以了！另外，请记住，如果没有z-index，您的 stick 元素将位于所有其他静态元素之上。另外，我没有为此创建 ASCII 艺术图，因为这需要滚动才能解释清楚，所以我为你实现了这个漂亮的 Codepen！只需滚动即可查看效果！
.box {
position: sticky;
top: 0;
}
结论
今天我们学习了如何在浏览器中定位元素，但position只有在必要且了解操作方法的情况下才应该使用！有些计算可能会对浏览器造成负担，如果元素太多需要额外计算，网站可能会变得卡顿。所以，先思考再实施！尝试这些方法以及用它们制作各种奇特效果非常有趣！但是，一如既往，你需要了解基础知识！所以，请随意尝试一下 Codepen 上的示例。
如果你能帮我做以下事情，那就太有帮助了！
去Twitch关注我！只要有几个人能这么做，这对我来说就意味着一切！❤❤❤😊
👋问好！ Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube
文章来源：https://dev.to/lampewebdev/css-quickies-position-49il