CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动 (float) | 定位 (position)
普通文档流
就是 CSS 中默认的文本文档
普通流中, 元素位置由文档顺序和元素性质决定, 块级元素从上到下依次排列, 框之间的垂直距离由框的垂直 margin 值计算得到, 行内元素在一行中水平布置
浮动
所有主流浏览器都支持 float 属性, 给元素设置 float 样式 , 元素会脱离文档流 , 浮动的元素可以左右移动, 直到他的外边框边缘碰到包含自己的框或者另一个浮动框的边缘
CSS 中, 任何元素都可以浮动, 浮动元素会生成一个块级框, 而不论它本身是何种元素, 行内元素和行内块元素会围绕浮动框排列, 块元素会被覆盖
在一行之上只有极少的空间可供浮动元素, 那么这个元素会跳至下一行, 这个过程会持续到某一行拥有足够的空间为止
他可取三个值:
eft | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
案列:
- div{
- float: left; /* 左浮动 */
- }
定位
所有主流浏览器都支持 position 属性, 给元素设置 position 属性可以规定元素的定位类型
任何元素都可以定位除静态定位以外, 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
他可取四个值:
absolute | 绝对定位,相对于 static 定位以外的第一个父元素进行定位。 ( 子绝父相 : 绝对定位相对于父元素设置了除静态定位以外而定位, 如果父级没有设置定位他会一层层向上寻找有定位的祖级 直到 body 元素) |
fixed | 绝对定位,相对于浏览器窗口进行定位。 |
relative | 相对定位,相对定位看作普通流的一部分,移动后的元素仍占据原来的位置,移动元素会导致他覆盖其他的框。 |
static | 默认值。没有定位。 |
子绝父相 案例
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- .father {
- position: relative; /* 相对定位 */
- width: 400px;
- height: 400px;
- background: yellow;
- margin: 200px auto;
- }
- .son {
- position: absolute; /* 绝对定位 */
- width: 100px;
- height: 100px;
- left: 50%;
- top: 50%;
- margin-left: -50px;
- margin-top: -50px;
- background: skyblue;
- }
- </style>
- </head>
- <body>
<div class="father"> 父盒子
- <div class="son"> 子盒子 </div>
- </div>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2521634.html