web前端入门——CSS中的几种定位详解及应用

css定位

CSS 有三种基本的定位机制：普通流、浮动流、定位流。
其中:
普通流: 从上至下,从左至右
浮动流: 元素添加了float:;
定位流: 添加了定位属性

一个脱离了文档流的元素：

1. 文档流中的元素摆放时，会忽略脱离了文档流的元素
2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素

定位方式:position

position属性值：

• static 默认值,设置坐标无效
• absolute 绝对定位
  1:脱离文档流,不占位置
  2: 默认参考html的00点(浏览器零点)
  3: 如果有父级,且父级有定位,那就参考父级元素(默认定位除外) 相当于给子元素指定了参考物
  用途：网页上需要重叠的地方可以使用绝对定位
• relative: 相对定位
  1: 占据文档流,占位置
  2: 参考自身加载在页面中的位置
  用途：主要给绝对定位提供包含块
• fixed: 固定定位
  1: 脱离文档流,不占位
  2: 元素固定在页面中不随着页面滚动而滚动，会受滚动条会影响。
  3: 参考浏览器的00点
  用途：网页上跟随着视口移动的元素（例如，回到顶部）
• sticky: 粘性定位
  1: 页面达到一定高度时,脱离文档流
  2: 效果是吸附浏览器顶部

坐标位置

• 水平 left right
• 垂直 top bottom

绝对定位和相对定位的区别

1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

以下是绝对定位和相对定位的详解图:

定位元素层次关系

z-index : auto |number

检索或设置对象的层叠顺序。
auto：默认值。
number：无单位的整数值，可为负数。

1. 没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
2. z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
3. 出现元素（颜色）重叠时，要哪个元素（颜色）在前，要哪个元素（颜色）在后，通过z-index设置，值越大越靠前

定位元素居中方式

方式一：

	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;

方式二：

	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;

定位的注意事项

1. 一个元素，只要position的取值不是static，认为该元素是定位元素
2. 盒子的偏移不会对其他盒子造成任何影响
3. 只有定位元素设置z-index有效
4. 绝对定位absolute、固定定位fixed元素一定是块盒
5. 绝对定位absolute、固定定位fixed元素一定不是浮动
6. 没有外边距合并

定位元素的应用

有层次关系的元素（相对定位&绝对定位）：

照片流放大效果（绝对定位）：

二级菜单（绝对定位）：


轮播图上的翻页按钮和图片底部标题（绝对定位）：

登录界面遮罩层/全屏广告（固定定位）：

侧边栏导航条（固定定位）：

吸附到浏览器顶部的导航条（粘性定位）：