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

定位

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

定位 = 定位模式 + 边偏移

定位模式

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

1. static（静态定位）

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

2. 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>

3. absolute（绝对定位）

   元素是参照祖先元素移动的，若没有祖先元素或祖先元素无定位则以浏览器定位。若祖先元素有定位，则以最近一级有定位的祖先元素为参考。

   <span style="background-color:var(--code-bg-color)"><span style="color:#8b0a0a">div</span> {
       <span style="color:#000000">position</span>: <span style="color:#221199">absolute</s