前端笔记（8）定位

妖狐艹你老母 2022-11-12 09:43 105阅读 0赞

### css样式表/层叠样式表（6） ###

*  定位
 *  定位模式
 *   *  静态定位（static）
     *  相对定位（relative）
     *  绝对定位（absolute）
     *  固定定位（fixed）
     *  堆叠顺序（z-index）
     *  定位改变display属性

# 定位 #

将盒子**定**在某一个**位置** 自由的漂浮在其他盒子(包括标准流和浮动)的上面 )

**标准流**在最底层 (海底) ------- **浮动** 的盒子 在 中间层 (海面) ------- **定位**的盒子 在 最上层 （天空）

**定位 = 定位模式 + 边偏移**

<table> 
 <thead> 
  <tr> 
   <th>边偏移属性</th> 
   <th>示例</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>top</td> 
   <td>top: 80px</td> 
   <td><strong>顶端</strong>偏移量，定义元素相对于其父元素<strong>上边线的距离</strong></td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>bottom: 80px</td> 
   <td><strong>底部</strong>偏移量，定义元素相对于其父元素<strong>下边线的距离</strong></td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>left: 80px</td> 
   <td><strong>左侧</strong>偏移量，定义元素相对于其父元素<strong>左边线的距离</strong></td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>right: 80px</td> 
   <td><strong>右侧</strong>偏移量，定义元素相对于其父元素<strong>右边线的距离</strong></td> 
  </tr> 
 </tbody> 
</table>

**注意：**

1.  **边偏移**需要和**定位模式**联合使用，**单独使用无效**
2.  `top` 和 `bottom` 不要同时使用
3.  `left` 和 `right` 不要同时使用

# 定位模式 #

在 CSS 中，通过 `position` 属性定义元素的**定位模式**，语法如下：

选择器 {  position: 属性值; }

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>语义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>static</code></td> 
   <td><strong>静态</strong>定位</td> 
  </tr> 
  <tr> 
   <td><code>relative</code></td> 
   <td><strong>相对</strong>定位</td> 
  </tr> 
  <tr> 
   <td><code>absolute</code></td> 
   <td><strong>绝对</strong>定位</td> 
  </tr> 
  <tr> 
   <td><code>fixed</code></td> 
   <td><strong>固定</strong>定位</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]

<table> 
 <thead> 
  <tr> 
   <th>定位模式</th> 
   <th>是否脱标占有位置</th> 
   <th>移动位置基准</th> 
   <th>模式转换（行内块）</th> 
   <th>使用情况</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>静态static</td> 
   <td>不脱标，正常模式</td> 
   <td>正常模式</td> 
   <td>不能</td> 
   <td>几乎不用</td> 
  </tr> 
  <tr> 
   <td>相对定位relative</td> 
   <td>不脱标，占有位置</td> 
   <td>相对自身位置移动</td> 
   <td>不能</td> 
   <td>基本单独使用</td> 
  </tr> 
  <tr> 
   <td>绝对定位absolute</td> 
   <td>完全脱标，不占有位置</td> 
   <td>相对于定位父级移动位置</td> 
   <td>能</td> 
   <td>要和定位父级元素搭配使用</td> 
  </tr> 
  <tr> 
   <td>固定定位fixed</td> 
   <td>完全脱标，不占有位置</td> 
   <td>相对于浏览器移动位置</td> 
   <td>能</td> 
   <td>单独使用，不需要父级</td> 
  </tr> 
 </tbody> 
</table>

## 静态定位（static） ##

**静态定位**是元素的默认定位方式，无定位的意思

静态定位 按照**标准流特性摆放位置**，它**没有边偏移**

静态定位在布局时我们几乎不用的

## 相对定位（relative） ##

**相对定位**是元素**相对**于它 原来在标准流中的位置 来说的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]  
**相对定位的特点**  
相对于 自己原来在标准流中位置来移动的  
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

## 绝对定位（absolute） ##

**绝对定位**是元素以带有定位的父级元素来移动位置

1.  **完全脱标** —— 完全不占位置；
2.  **父元素没有定位**，则以**浏览器**为准定位（Document 文档）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]
3.  **父元素要有定位**  
    将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]  
    **绝对定位的特点**  
    • 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置  
    • 不保留原来的位置，完全是脱标的

**定位口诀 —— 子绝父相**

**绝对定位盒子的居中**  
**注意：绝对定位/固定定位的盒子**不能通过设置 `margin: auto` 设置**水平居中**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 4]  
`left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**  
`margin-left: -100px;`：让盒子**向左**移动自身宽度的一半  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 5]

## 固定定位（fixed） ##

**固定定位**是**绝对定位**的一种特殊形式

1.  **完全脱标** —— 完全不占位置；
2.  只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置  
    • 跟**父元素没有任何关系**；单独使用的  
    • **不随滚动条滚动**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 6]

## 堆叠顺序（z-index） ##

在使用**定位**布局时，可能会**出现盒子重叠的情况**  
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子  
应用 `z-index` 层叠等级属性可以**调整盒子的堆叠顺序**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 7]  
**`z-index` 的特性如下**

1.  **属性值：正整数、负整数**或 **0**，默认值是 0，数值越大，盒子越靠上；
2.  如果**属性值相同**，则按照书写顺序，**后来居上**；
3.  **数字后面不能加单位**  
    **注意**：`z-index` 只能应用于相对定位、绝对定位和固定定位的元素，**其他标准流、浮动和静态定位无效**

## 定位改变display属性 ##

可以用`inline-block` 转换为行内块  
• 可以用浮动`float`默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）  
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块

一个行内的盒子，如果加了**浮动**、**固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等

**同时注意**  
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用`padding border overflow`解决的）  
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]: /images/20221022/76aa2343e15d480384c60d61074c47b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]: /images/20221022/e633adfa598147ee853e3ec988b810fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]: /images/20221022/92aedddb38534f3595eccc97130495f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]: /images/20221022/7e6bc5fbd35e4d8cb258298f69addeb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 4]: /images/20221022/09e647242d1a4aa9888694bbbd6c4f09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 5]: /images/20221022/63a90f43d724485cac78d72b16f70d07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 6]: /images/20221022/31cf91be7a6b4afa8c8feeec1a358450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 7]: /images/20221022/3edcbafd509a4d6ebeca867d87827c7c.png