理解浮动和position定位

时间 2019-11-20

标签理解浮动 position 定位栏目 CSS 繁體版

原文原文链接

前言

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

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

　　如何浮动一个元素？先设定其宽度width，再增长样式规则float:left/right。spa

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

　　提到浮动，就得提清除浮动clear。以下图：htm

　　由于块级元素不知道左侧浮动元素的存在（浮动元素不在文档流中），因此块级元素会铺满整个区域。能够用元素的CSS clear属性来提出请求：当元素流入页面时，在这个元素的左边、右边或两边不容许有浮动内容。对象

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

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

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

　　(一)staticget

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

　　(二)relative

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

　　//注意：这个元素原来占据的空间保留着，其余元素没改变位置。相对定位元素常常被用来做为绝对定位元素的容器块。

　　(三)absolute

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

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

　　(四)fixed

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

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