欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

理解浮动和position定位_html/css_WEB-ITnose

程序员文章站 2022-05-01 22:25:23
...

前言

  为了更好理解浮动和position,建议先看看我写的这篇文章《Html文档流和文档对象模型DOM理解》

正文

  一、浮动

  CSS设计float属性的主要目的,是为了实现文本绕排图片的效果。然而,这个属性居然也成了创建多栏布局最简单的方式。

  如何浮动一个元素?先设定其宽度width,再增加样式规则float:left/right。

  //注意:该浮动元素已从正常文档流中删除。浮动元素是被块级元素忽略的元素,但是内联元素知道它们在哪里,内联元素会留意浮动元素的边界,而块元素会正常流向页面。

  提到浮动,就得提清除浮动clear。如下图:

  

  因为块级元素不知道左侧浮动元素的存在(浮动元素不在文档流中),所以块级元素会铺满整个区域。可以用元素的CSS clear属性来提出请求:当元素流入页面时,在这个元素的左边、右边或两边不允许有浮动内容。

  

  添加样式clear:left; 这样,块级元素就会在浮动元素的下面了。

  想了解更多浮动的知识,请看例子。《围住浮动元素的三种方法》

  二、position

  position属性有4个值:static、relative、absolute、fixed。

  (一)static

  HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

  (二)relative

  相对的是元素原来在文档流中的位置(或者默认位置)。相对定位会让元素正常地流入页面,不过在页面上显示之前要进行偏移。

  //注意:这个元素原来占据的空间保留着,其他元素没改变位置。相对定位元素经常被用来作为绝对定位元素的容器块。

  (三)absolute

  绝对定位会把元素从文档流中删除,块元素和内联元素都不知道它的存在,绝对定位的元素的定位上下文是最近的已定位父元素,其默认的定位上下文

元素。

  //绝对定位元素的任何祖先元素都可以成为它的定位上下文,只要把相应祖先元素的position设定为relative/fixed即可。

  (四)fixed

  固定定位会把元素从文档流中删除,块元素和内联元素都不知道它的存在,其定位上下文是视窗口。

  ps:relative、absolute、fixed有z-index属性。