下载文档原格式
CSS布局之定位布局
定位布局(Position)指元素可以脱离原来的位置，定位到页⾯中的任意位置。
定位布局以内边距(padding)区域的左上⾓为定位原点，分为相对定位(包括static及relative)和绝对定位(包括absolute及fixed)。
1. 静态定位(static)
静态定位是默认的⽂档布局⽅式，表现为从左到右、从上到下的布局样式。
2. 相对定位(relative)
相对定位指元素相对于原本的位置进⾏偏移，保留元素所占的位置，元素框定位到其他元素的上层。
// 指定position属性后，还要指定left/right/top/bottom属性
position: relative;
left: 2px;
top: 2px;
3. 绝对定位(absolute)
绝对定位指元素以⾮static定位的祖先元素Padding区域左上⾓为定位原点，进⾏偏移，不会保留元素所占的位置。
如果祖先元素都是static定位，则以body元素为参考点。
// 同样要指定left/right/top/bottom属性
position: absolute;
left: 2px;
top: 2px;
4. 固定定位(fixed)
固定定位指元素以页⾯左上⾓为定位原点，进⾏定位，不会保留元素所占的位置。
// 同样要指定left/right/top/bottom属性
position: fixed;
left: 2px;
top: 2px;
补充
如果定位时，同时指定left和right属性，则元素的宽度就会确定下来；⾼度同理。
CSS定位：排列方式：position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
static 默认值。
没有定位。
absolute 绝对定位，相对于(static 定位以外的第一个) 父元素进行定位。
通过绝对定位，元素可以放置到页面上的任何位置。
元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定。
(注：static 定位以外的第一个父元素：相对与最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据body 对象左上角作为参考进行定位。
)relative 相对定位，相对于其正常位置进行定位。
元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定。
fixed 绝对定位，相对于浏览器窗口进行定位。
元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定。
绝对定位和相对定位的区别绝对定位对象可以层叠,相对定位的对象不可以相对定位对象会占据它原来位置,绝对定位不会top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
注：如果"position" 属性的值为"static"，那么设置"top" 属性不会产生任何效果。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
注：如果"position" 属性的值为"static"，那么设置"right" 属性不会产生任何效果。
深入理解css布局之定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。
今天我们来深入学习一下css布局相关的知识。
上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。
这篇我们继续...一、定位与浮动上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。
但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。
1.1 文档流文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。
那么也就可以理解成我们刚才所说的一个二维平面的概念。
那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。
1.2 定位定位允许你使用position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。
根据position 属性的取值，元素可以分为静态定位元素static （默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。
首先我们抛开static这个默认值，因为他基本不属于定位的范畴，因为元素默认就是static，他就相当于是依据文档流显示。
当我们使用定位时，需要position属性和top,left,right,bottom 这两类属性共同参与来决定一个元素的定位类型和偏移量。
使用方法很简单，这里说下他们之间的区别:•relative相对定位•元素根据其在当前文档流所在位置作为参考系，进行偏移。
•定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。
•absolute绝对定位•元素会将其带有position为非static的祖先元素作为参考系进行偏移。
css中的⼏种控制页⾯布局的定位机制（相对定位与绝对定位） CSS中⼏种控制页⾯布局的定位机制 对于web的初学者来说，CSS中的⼏种定位⽅式经常让⼈摸不着头脑，从⽽达不到想要的页⾯布局效果，趁有时间就好好总结⼀下CSS 中的⼏种定位⽅式，也当⾃⼰再巩固⼀下。
CSS中包含三种控制页⾯布局的定位机制：普通流、相对定位、绝对定位。
在CSS中通过position属性表明定位机制。
此外还可以使⽤float属性来让元素浮动 普通流 相应语法（默认） position:static; 所谓的普通流就是根据块级元素以及内联元素⾃⾝的属性来进⾏布局，⽽不⼈为的进⾏控制。
每个块级元素都换⾏显⽰，每个项⽬都显⽰在前⼀个项⽬的下⼀⾏。
即使你制定了盒⼦的宽度，并且也有⾜够的宽度让两个元素并排显⽰，他们还是不会出现在同⼀⾏。
这是浏览器处理HTML元素的默认⽅式，不必使⽤CSS属性表明元素应该出现在普通流⾥⾯以下的所有⽰例都使⽤此HTML5代码1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Happy kitchen</title>6<link href="test.css" rel="stylesheet" type="text/css">7</head>8<body>9<div id="div1">Div1</div>10<div id="div2">Div2</div>11<div id="div3">Div3</div>1213</body>14</html>CSS代码1 body2 {3 width: 750px;4 color: black;5 }6 div7 {8 border: solid;9 width: 400px;10 height: 200px;11 text-align: center;12 }13 #div114 {15 background-color: red;16 }17 #div218 {19 background-color: green;2021 }22 #div323 {24 background-color: blue;25 }效果图： 相对定位 相应语法 position:relative 相对定位将⼀个元素从它在普通流所处的位置上进⾏移动，并且这种移动不会影响周围元素的位置，它们还是处于在普通流中所处的位置。
CSS样式表属性及定位布局CSS样式表在⽹站制作中是最常⽤到的布局⽅式，他的样式属性也是⾮常庞⼤⾮常多的，需要长时间的去练习、记忆。
下⾯写⼀下在CSS中最常⽤到的⼀些基本的属性：⼀、CSS背景属性：1、background-color 背景颜⾊2、background-image 背景图⽚背景图⽚需添加路径，即url后边添图⽚路径3、background-repeat 背景的平铺⽅式，no-repeat是不平铺，repeat-x是横向平铺，repeat-y是纵向平铺。
4、background-position 背景图⽚的位置，有left,top,right等，可以随意设置5、background-attachment 背景图⽚是否滚动，需要与overflow:scroll配合使⽤。
6、background-size 背景图⽚的⼤⼩，可以⽤像素表⽰。
⼆、CSS字体属性：1、font-family 字体样式，⼀般⽤于添加外部字体。
2、font-size 字体⼤⼩，不同于以前HTML的字体，这⾥的字体可以⽤像素表⽰。
3、font-style 字体风格，如italic倾斜，normal不倾斜。
4、font-weight 字体加粗，这⾥可以⽤数字表⽰，也可以选择small等。
5、text-decoration 添加underline下划线、overline上划线、line-through删除线、none没有，⽤来去掉超链接的下划线。
6、color 字体颜⾊三、对齐⽅式及边界边框1、text-align ⽔平对齐⽅式2、vertical-align 垂直对齐⽅式，需配合⾏⾼使⽤3、line-height ⾏⾼，在不是表格的时候⼀般⽤⾏⾼position4、text-indent ⽤来定义⽂本的缩进5、margin 外边距，上下左右都可以设置6、padding 内边距，上下左右可以设置7、border 后边写边框粗细，边框样式（实、虚）、边框颜⾊8、list-style 加none可以将列表前边的序号去掉9、list-style-image 可以将序号变为图⽚四、格式与布局1、position 是定位位置的，fixed是固定位置，相对于浏览器边框位置固定。
