css定位属性的运用

css属性的运用

在讲css定位前我们先来看一下下面这个小问题：

问：将物品 a 放在桌子 b 上需要几个步骤？

• 分析：

       第一步：拿起物品a
       第二步：找桌子b（参照物）
       第三步：放在上面（坐标：桌子的上面）
  

定位

• 定位属性：position
  作用：检索或者设置元素的定位方式（改变元素位置的属性）

• 定位的步骤：

   第一步：给元素添加position属性，证明该元素要做位置的变化。
   第二步：确定参照物！（通过position的属性值来确定：static\absolute\relative\fixed\sticky）
   第三步：确定坐标 left  right  top  bottom
  

• position的属性值（用来确定定位的方式）

     1.static 静态定位：
      position的默认值，默认文本流的状态。（添加不添加状态都是一样的）
      不会识别left right top bottom指定的坐标
  

如图示例：
此时没有添加 static 属性值的代码以及效果如下


添加 static 属性值过后效果如下


由上图的显示我们可以很清楚的看到，添加 static 属性值过后，前后都没有发生变化！

• position的属性值（用来确定定位的方式）

      2.absolute 绝对定位:
        a : 参照物：按照已经有定位的父元素进行位置的变化。
        b : 假如当前没有父元素或者父元素没有定位的情况下，以整个文档为参照物。
        c : 绝对定位，脱离文档流、不占据空间
  

如图示例：
给子元素添加 absolute 但是不对父元素添加定位时，代码及效果如下


我们可以清楚的看到 h2 这个子元素跑到整个页面的右下角去了 ，这是因为我们没有对父元素 div 添加定位，让它形成参照物。当我们对父元素 div 添加定位我们再来看看效果，代码及效果如下图所示：


现在我们可以看到子元素 h2 在父元素 div 的右下角，因为此时的参照物为父元素 div ！
接下来我们再来看看对于 absolute 的脱离文档流、不占据空间的理解！
首先这是初始的代码以及效果图：


接下来我们给 h2 添加定位属性，代码及效果图如下：


这次我们看到的是红色方块 h3 往上走了，那是因为蓝色方块 h2 添加 absolute 属性值过后脱离文档流、不占据空间！它不占据空间了，也就是说原来 h2 占据的地方空着了，所以 h3 跑上去了！

• position的属性值（用来确定定位的方式）

      3. relative 相对定位：
        a : 参照物：自身默认的位置！
        b : 始终占据空间，不会破坏文档流
  

如图所示：我们先写一段初始的代码以及看下效果


接着我们对红色方块 h3 添加 relative 属性值来看看效果


我们可以看到添加 relative 属性值过后红色方块 h3 的位置发生了变化，并且粉色方块保持在原来位置。因为 relative 属性值是始终占据空间，不会破坏文档流，也就是说原来的位置它还占据着空间！

最后

非常感谢大家的观看，希望对大家有帮助，欢迎大家在评论区讨论，记得双击么么哒(づ￣ 3￣)づ