前端基础CSS3之定位流

定位流

• 相对定位

  含义：相对于自己以前在标准流中的位置进行移动

  格式：

  position:relative;
  top:20px;
  left:20px;
  right:20px;
  bottom:20px;

  注意：

  1.不脱标；
  2.同一个方向上的定位属性只能用一个；
  3.区分块级、行内和行内块级元素；
  4.再添加magine/padding属性时，属性作用对象为移动之前原始位置的元素

  应用场景：给小元素做微调；配合绝对定位使用<!--子绝父相-->

• 绝对定位

  格式：

  position:absolute;
  top:20px;
  left:20px;
  right:20px;
  bottom:20px;

  注意：

  1.脱标；
  2.不区分块级、行内和行内块级元素；
  3.如果绝对定位的元素以body元素为参考点，则在浏览器是以首屏宽高为参考点，随滚动条会移动
  4.绝对定位的元素会忽略父元素的padding属性

  定位参考点：

  1.默认以body元素为参考点
  2.如果绝对定位的元素有祖先元素，且祖先元素属于定位流（相对、绝对、固定），则参考点为改祖先元素

  应用场景：

  子绝父相：子元素不会占用父元素空间，且子元素不会随着浏览器窗口大小变化而变化（但会随着父元素大小变化而变化），应用于“图上有图”的情形
  水平居中：（子元素中加入代码）
  

  left:50%;
  margine-left:-[子元素宽度的一半];

   

• 固定定位

  含义：使得元素不随着屏幕的滚动条而滚动

  格式：

  position:fixed;
  top:20px;
  left:20px;
  right:20px;
  bottom:20px;

  注意：

  1.脱标；
  2.不区分行内、块级和行内块级元素；

  应用场景：穿透导航条、广告展示、返回顶部小按钮

• 静态定位

  默认情况下的元素都是静态定位模式

• z-index属性

  1.默认每个元素都拥有一个z-index属性
  2.默认情况下定位流元素会覆盖标准元素
  3.默认后添加的定位元素会覆盖先添加的定位元素
  4.谁的z-index属性值大，谁就在上面
  5.从父现象：父元素设置了z-index属性后，其子元素的z-index属性就会失效