【CSS基础学习笔记】定位、元素的显示与隐藏

最新推荐文章于 2025-04-09 09:35:12 发布

原创最新推荐文章于 2025-04-09 09:35:12 发布

· 374 阅读

0 ·

版权

文章标签：

#css

前端学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS中的定位概念，包括静态定位、相对定位、绝对定位、固定定位和粘性定位，详细讲解了定位模式和边偏移。同时，讨论了元素的显示与隐藏，对比了display和visibility的区别，以及overflow的溢出处理。此外，还提及了精灵图在CSS中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定位

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。（例如“回到顶部”按钮）

定位 = 定位模式 + 边偏移

定位模式

决定了元素的定位方式，通过position属性设置，分为4个。

static（静态定位）

默认定位，即无定位，按照标准流特性摆放。

relative（相对定位）

元素是相对于原来的位置移动的。

原来在标准流的位置也继续占有，后面的盒子仍然以标准流的方式对待它。

<span style="background-color:var(--code-bg-color)"><span style="color:#8b0a0a">div</span> {
    <span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;
    <span style="color:#000000">left</span>: <span style="color:#1b39e2">100px</span>;    <span style="color:#128112">/*原来的位置在移动后位置的左边100px*/</span>
}</span>

absolute（绝对定位）

元素是参照祖先元素移动的，若没有祖先元素或祖先元素无定位则以浏览器定位。若祖先元素有定位，则以最近一级有定位的祖先元素为参考。
```
div {
 position: absolute;
 right: 100px; /*无祖先元素，元素定位在距离浏览器右侧100px的地方*/
}
```
修改为绝对定位后原地址不存在，且绝对定位不占有位置。

加了绝对定位的盒子不能通过margin: 0 auto;来设置水平居中。（只能通过先使用left: 50%;向右移动，再使用margin向左移动自身盒子宽度的一半）

子级使用绝对位，父级则需要相对定位。（因为父亲必须要有定位且要占据位置）

fixed（固定定位）

固定于浏览器中的可视区。以浏览器的可视窗口为参照（固定于窗口某一位置），不随滚动条的滚动而滚动。

固定定位不占有原来的位置。

<span style="background-color:var(--code-bg-color)"><span style="color:#8b0a0a">div</span> {
    <span style="color:#000000">position</span>: <span style="color:#221199">fixed</span>;
    <span style="color:#128112">/*先设置位置为浏览器宽度的一半*/</span>
    <span style="color:#000000">left</span>: <span style="color:#1b39e2">50%</span>;
    <span style="color:#128112">/*再使用margin移动版心盒子宽度的一半*/</span>
    <span style="color:#000000">margin-left</span>: <span style="color:#1b39e2">400px</span>;
    <span style="color:#000000">width</span>: <span style="color:#1b39e2">50px</span>;
}</span>

sticky（粘性定位）

是相对定位和固定定位的混合。（IE不支持，不常用）

以浏览器的可视窗口为参照点移动，和页面滚动搭配使用。粘性定位的盒子会占有原来的位置。

<span style="background-color:var(--code-bg-color)"><span style="color:#8b0a0a">div</span> {
    <span style="color:#000000">position</span>: <span style="color:#000000">sticky</span>;
    <span style="color:#000000">top</span>: <span style="color:#1b39e2">100px</span>; <span style="color:#128112">/*滑动滚动条，当盒子移动到距离顶部100px时不动*/</span>
}</span>

边偏移

定位的盒子移动到最终位置。有top、bottom、left、right四个属性。

如果一个盒子既有left属性也有right属性，则默认会执行left属性；既有top属性也有bottom属性，则默认执行top属性。

定位的叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)。

<span style="background-color:var(--code-bg-color)"><span style="color:#333333"><span style="color:#8b0a0a">div</span> {
    <span style="color:#128112">/*默认为auto，数值越大，盒子越上。若属性值相同，则后来者居上。*/</span>
    <span style="color:#000000">z-index</span>: <span style="color:#1b39e2">1</span>;
}</span></span>

只有定位的盒子才有z-index属性。

定位的特性

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。（不用模式转换）
块级元素添加绝对或者固定定位，如果不设置宽度或者高度，默认大小是内容的大小。（不再是单独占据一行100%的宽度）
浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题。
绝对定位、固定定位会完全压住盒子。而浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)。（因为浮动最初用于做文字环绕效果）

元素的显示与隐藏

display显示隐藏

用于设置一个元素应如何显示。

<span style="background-color:var(--code-bg-color)"><span style="color:#8b0a0a">display</span>: <span style="color:#008855">none</span>;  <span style="color:#128112">/*隐藏*/</span>
<span style="color:#8b0a0a">display</span>: <span style="color:#008855">block</span>; <span style="color:#128112">/*除了转换为块元素以外还有显示的含义*/</span></span>

display隐藏元素后，不再占有原来的位置。

visibility显示隐藏

<span style="background-color:var(--code-bg-color)"><span style="color:#8b0a0a">visibility</span>: <span style="color:#008855">inherit</span>;    <span style="color:#128112">/*继承上一个父级的可视性*/</span>
<span style="color:#8b0a0a">visibility</span>: <span style="color:#008855">visible</span>;    <span style="color:#128112">/*元素可视*/</span>
<span style="color:#8b0a0a">visibility</span>: <span style="color:#008855">hidden</span>;     <span style="color:#128112">/*元素隐藏*/</span></span>

visibility隐藏元素后，继续占有原来的位置。

overflow溢出显示隐藏

指定内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

<span style="background-color:var(--code-bg-color)"><span style="color:#8b0a0a">overflow</span>: <span style="color:#008855">visible</span>;  <span style="color:#128112">/*默认，不剪切内容也不添加滚动条*/</span>
<span style="color:#8b0a0a">overflow</span>: <span style="color:#008855">hidden</span>;   <span style="color:#128112">/*不显示溢出的内容，但溢出的内容依然有占据空间*/</span>
<span style="color:#8b0a0a">overflow</span>: <span style="color:#008855">auto</span>;     <span style="color:#128112">/*溢出才显示滚动条*/</span>
<span style="color:#8b0a0a">overflow</span>: <span style="color:#008855">scroll</span>;   <span style="color:#128112">/*总是显示滚动条*/</span></span>