CSS笔记

一、position

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

• 如果想将某控件固定在窗口某个位置，比如顶部，就可以采用该fixed属性。但需要注意其兄弟组件，如果想显示完整，需要进行移动，以免被该组件遮蔽。而且通常需要给他们的父组件position设置为relative,overflow为hidden，避免子组件显示异常。
  
  

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。同时该对象从文档流中拖出。

• 子元素采用absolute定位时，若父元素没有设定高度，而且父元素设置了overflow:hidden,会导致子元素不显示，原因是在使用absolute定位时，会导致该元素脱离文档流，无法撑开父元素。解决方法可以指定父元素足够高的高度，可以通过js进行；子元素去掉absolute属性。
• 子元素定位的依据是设定position属性的父元素，上一层没有设定继续往上一层查找，若一直没有则默认依据是body。

二、变化

• translateY()

  translateY()函数表示在页面垂直移动元素. 这个transformation具有特征的就是通过 定义了元素垂直移动了多少。

该变化效果可以用在从下往上弹出控件，初始时可以设为一个超过100%的值，比如transform: translateY(150%);，然后想要显示时，可以设为transform: translateY(0)。搭配transitions属性，可以增加一点动效，提升用户体验。

• padding

  padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。

  这个属性有个奇怪的现象，就是当width为100%时，padding-right 会失效。这种现象可以解释为‘流动性丢失’。