CSS中的定位：相对定位、绝对定位、浮动

定位：允许编程时定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置；

三种基本的定位机制

• 普通流；
  • 除非专门指定，否则所有框都在普通流中定位；
• 浮动；
• 绝对定位；

绝对定位

position属性

属性值的含义：

• static
  • 默认值；
  • 元素框正常生成：元素出现在正常的流中，忽略top、bottom、left、right或者z-index声明；
• relative（相对定位）
  • 元素框相对于其正常出现位置偏移某个距离；
  • 元素仍保持其未定位前的形状，它原本所占的空间仍保留（因此尽量避免使用）；
• absolute（绝对定位）
  • 元素从文档流完全删除（不占据空间），并相对于其包含块（最近的已定位祖先元素）进行定位；
  • 如果没有已定位的祖先元素，那么它的位置相对于最初的包含块；
• fixed（固定定位）
  • 生成绝对定位的元素；
  • 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身；
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• inherit
  • 规定当前元素从父元素继承position属性的值；

应用步骤

元素覆盖在另一元素上方

1. 确定覆盖元素和被覆盖元素；
2. 将被覆盖元素和覆盖元素共同的父元素设定为相对定位；
3. 将覆盖元素设置为绝对定位；

浮动

• 在CSS中任何元素都可以浮动，浮动元素会生成一个块级框，不论其本身是什么元素；

float属性

属性值的含义：

• none；
  • 默认值；
  • 元素不浮动，并会显示在其在文本中出现的位置；
• left；
  • 元素向左浮动；
• right；
  • 元素向右浮动；
• inherit；
  • 规定应该从父元素继承float属性的值；

浮动影响

• 文本会给浮动的元素让位，形成文本环绕的效果；
• 在没有给父级高度的情况下，子级浮动后，父级会没有高度；
  • 如：若li标签都浮动则ul标签无高度。
• 内元素在浮动之后，可以支持设置宽高；
• 元素会重叠，但是内容不会，因此内容排版会出错。

消除浮动影响的方式

• 给其父元素设置高度；
  • 只适用于已知所需高度的元素；
• 清除浮动
  • 不推荐使用，因为会产生大量无用标签使得页面布局更为复杂；
  • 在父级内容最后添加一个空的div，为其添加属性：clear:both;；
• 给父级设置overflow:hidden;
  • 不推荐使用，在和定位一起使用的时候，会产生其他的问题；
  • 溢出隐藏，会触发bfc(block formatting context)块级格式化上下文;
• 使用伪元素选择器；（推荐）
  • CSS内容

    .clear::after{
        height: 0;
        line-height: 0;
        visibility: hidden;/*隐藏*/
        content：" ";/*内容为空*/
        clear:both;/*清除浮动*/
        display:block;
    }
    

  • 同时为需要清楚浮动的元素设置class="clear"
• 使用伪类选择器；
  • CSS内容

    .clear:after,.clear:before{
        content：" ";/*内容为空*/
        clear:both;/*清除浮动*/
        display:block;
    }
    

  • 同时为需要清楚浮动的元素设置class="clear"