CSS笔记-中级

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

• static
• relative
• fixed
• absolute
• sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

fixed固定在某处地方不动。

position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

先是普通显示，当滚动屏幕超过了原来的位置，粘性元素将固定住顶端。

重叠元素

z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

设置为-1，相当于放在所有默认元素底部。类似于图层的概念。

CSS 溢出处理

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

• visible - 默认。溢出没有被剪裁。内容在元素框外渲染
• hidden - 溢出被剪裁，其余内容将不可见
• scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
• auto - 与 scroll 类似，但仅在必要时添加滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。

所有 CSS 组合选择器