CSS定位是什么?为什么需要定位？如何定位？

目录

1.定位原因

2.定位方式

        2.1定位模式

        2.2位偏移

3.定位总结

4.定位叠放次序 z-index

5.显示与隐藏

---

1.CSS定位

• 需要用到定位的原因：
  • 有一些覆盖在固定盒子上的特殊盒子，通过标准流和浮动很难实现。
•   定位：定位模式+边偏移
  • 定位模式分三种：
    • position:static静态(了解，很少用)
    • position:relative相对
      • 相对目前的所在位置而发生偏移，偏移之后原来所霸占的区域仍然保留，不拖标，不会影响其他标准流盒子的位置，通俗的来说就是停职留薪。
    • position:absolute绝对
      • 绝对定位是参照父元素进行定位的，
        • 1.但是如果没有父元素或者父元素没有定位（例如浮动），则以浏览器为准定位（Document文档）,通俗的来说就是无父无母之人，交给国家来管。
        • 2.怎么给父元素加定位？
          • .father{position:absolute/relative/fixed}
        • 3.如果父元素没有定位，但是父父元素有定位，子元素能参照父父元素进行相对定位吗？
          • 可以，子元素回以最近一级的带定位的祖先定位，通俗来讲就是，老子不行但是爷爷行啊。
        • 4.绝对定位的元素会拖标，简称裸辞啊，自由自在的覆盖在其他盒子之上。
    • position:fixed固定
      • 1.固定定位的盒子是根据可视窗口进行定位的，因此如果用来fixed来定位，就不需要用绝对定位了，也就对父元素是否有定位没有要求了。

 

 

• • • • 2.不随滚动条滚动（这句话奇奇怪怪哈哈哈哈哈）
      • 3.脱标，不占有原来位置
      • 4.固定到版心右侧的技巧：（假定版心width=400px）
        • 第一步：left:50%（先走版心的一半）
        • 第二步：margin-left:200px(再走版心的一半)

         

• • • position:sticky粘性定位
      • 可以实现先随页面滚动再固定的效果
      • 但是占有原先位置（相对定位的特点）
      • 必须添加top/left....才生效，否则当作相对定位来展现。
      • 缺点：兼容性较差，IE不支持。
      • 导航栏应用该定位的
      • 技巧：
        • 添加后导航栏仍然会被一些内容覆盖

         

• • • • • 我们将新学的z-index定位叠放顺序用上，在导航栏选择器内设置z-index:1,即可解决.
  • 边偏移：top/bottom/left/right
    • top:100px;left:100px

     

• 定位技巧：子绝父相
  • 1.子元素采用绝对定位，父元素采用相对定位
    • 原因：子元素需要自由的在盒子里摆放，脱标是最好的，不占有原先位置，想往哪放就往哪放，但是父元素不一样，父元素需要相对定位来不脱标的占有原来的位置，这样子元素才能参照父元素进行定位。通俗来讲，就是老子有固定的房子，孩子在房子内怎么蹦跶都可以。
  • 2.子元素采用了绝对定位，如何进行水平/竖直居中？
    • 错误：使用margin:0 auto;没有效果
    • 正确（和相对定位靠版心的方法一样）：假设子盒子width:100px
      • 第一步：走到中轴线上，left:50%
      • 第二步：往回走半个子盒子，margin-left:-50px;

       

• 定位总结：
  • 1.定位模式总结

   

• • 2.定位特殊特性
    • 绝对定位和固定定位也和浮动类似
      • 2.1 行内元素加了，可以设置高度和宽度。
      • 2.2 块元素加了，不给高度和宽度的话，默认大小时内容的大小。
  • 3.绝对定位/浮动对下面盒子中的文字的影响？
    • 浮动不会压住下面标准流中盒子中的文字，但绝对定位会。

     

• • • • 原因：最初浮动的诞生是为了让周围的文字围绕在其身旁，不是专门用来做页面布局的。

 

 

• 定位叠放次序 z-index
  • 目的：用来控制盒子的前后次序（z轴，也就是朝我们脸这边）
  • 数值：可正可负可0（默认时auto），数值越大，盒子越靠上。
  • 使用：只有定位的盒子才有该属性，选择器{z-index：1/2/3/4....}，给选择器进行排序。
• 显示与隐藏
  • display（重点）
    • none(隐藏)/block（还有显示之意）
    • 隐藏之后不再占有位置
  • visibility
    • visible;元素可见
    • hidden;元素隐藏,但是保留位置。
    • inherit:继承上一个父对象的可见性
  • overflow
    • 目的：解决溢出的问题

     

• • • visible；元素可见
    • hidden；元素隐藏，把多出来的部分隐藏；
    • auto；超出来会自动显示滚动条
    • scroll；一定会显示滚动条
    • 注意：在有定位的盒子上慎用overflow,因为用以把多出来的部分隐藏掉。