定位

发表于 | 分类于

一、定位 position

  1. position:static; 静态定位(默认标准流定位)
    无法设置left、right、top、bottom值
  2. position:relative; 相对定位
    (1)相对于自己本身所在的位置进行移动定位
(2)配合left、right、top、bottom进行移动定位。**相对于自己的某条边往元素中心移动为正值**。
(3)相对定位的元素**不脱离标准流**。（灵魂出窍）
  3. position:absolute; 绝对定位
    (1)绝对定位的元素是相对于html或者最近的有定位的父元素 进行定位
(2)配合left、right、top、bottom进行移动定位。**相对于包含块的某条边往包含块中心移动为正值**
(3)绝对定位的元素会**脱离标准流**
  4. 如何实现元素在容器中居中？
    **子绝父相**（父元素可以是其他定位），子元素{top:50%;margin-top:-自己高度的一般;left:50%;margin-left:-自己宽度的一半。}
  5. position:fixed ; 固定定位
    (1) 相对于浏览器的可视区域进行移动定位
(2) 配合left、right、top、bottom进行移动定位。**相对于浏览器可视区域的某条边往浏览器可视区域中心移动为正值**
(3) 脱离标准流

二、层级 z-index

1.定位>浮动>标准流
2.z-index 只能用于有定位的元素上
3.z-index 可以取负数

三、命名锚点

​ a[href=”#id名”]跳转到id名所在的元素上
a[href=”页面路径#id名”]跳转到其他页面该id名所在的元素上

四、overflow 内容溢出容器时的处理方式

​ 属性值：visible 默认可见 hidden隐藏
scroll 滚动条 auto判断需要出现滚动条时才出现
设置某个方向： overflow-x 水平方向 overflow-y垂直方向
规定：当某一个方向的值设置不为visible，另外一个方向会自动设置成auto