css-定位position的学习心得

css-定位position的学习心得

从头开始学习前端，在学习CSS的过程中，慢慢挖掘出小知识，特此给大家分享下。
首先我们来聊聊CSS中的position这个属性，position一般是用来对元素进行定位，以便于更好的在页面中进行布局。
position有5个属性值：static、relative、absolute、fixed、stisky

• static
  静态定位，是position的默认值。

• relative
  相对定位，参照元素自身在文档的原始位置进行定位，不会脱离文档流，但会占据空间。

• absolute
  绝对定位，参照已经定位的父元素的位置进行定位，如果父元素没有定位就参照文档元素，例如html、body。会脱离文档流，并且不占据空间。

• fixed
  固定定位，参照浏览器窗口进行定位，会脱离文档流

• sticky
  粘性定位，特点是当页面没有滚动条的时候，执行的是position:relative;
  如果页面产生滚动条，执行的是position:fixed;一般用来做吸顶效果的应用。

应用：如何用定位实现一个元素在父元素内上下左右居中
1.简单粗暴型，不需要计算元素的宽高
父元素：
position:relative;
子元素：
position:absolute; left:0;bottom:0;left:0;right:0; margin:auto;
2.稍微复杂型，需要计算元素的宽高
父元素：
position:relative;
子元素：
position:absolute; left:50%;top:50%; margin-left:-元素宽的一半； margin-top:-元素高的一半;
注：- 这个符号别漏写了。