CSS定位内容小结

在页面布局时，如果同时涉及到多个块就需要对各个块的定位方式进行处理，在看了很多关于布局的问答之后有以下心得。

首先说一下各种定位方式的区别

• absolute 绝对定位，我理解为当一个块定位方式设置为绝对定位后，在布局中，首先会依据设置定位属性为relative/absolute/fixed的祖先元素进行定位这里要注意的是，不一定是父元素，也可以是爷爷元素，或者祖父元素，统称祖先元素，如果在向上匹配的过程中匹配到祖先元素设置了定位属性，则会相对于此祖先元素进行定位，而不会继续向上匹配，如果祖先元素全都没有设置定位属性。 则会根据body进行定位。绝对定位会脱离文档流

• relative 相对定位，在祖先元素这个级别，如果使用相对定位，在设置偏移时会参照原本正常出现的位置进行偏移，但是原本的位置并不会被占用，所以可以避免在偏移之后其他元素布局被打乱的情况。相对定位不会脱离文档流

• 在设置定位关系时，如果对子元素设置了相对定位，则需要对父元素或祖先元素也设置一个定位属性，对祖先元素设置定位属性并不是为了改变祖先元素的位置，而是起到一个辅助子元素定位的作用，使子元素相对于需要的父元素进行定位，而不是其他父元素。

• 另外需要注意的是，不论是相对定位还是绝对定位，如果只设置了属性而不设置偏移，对该元素本身的位置并不影响。
  在布局时使用子绝父相的用意，我认为是需要保留父元素的空间，如果父元素设置了绝对定位，脱离文档流之后可能会影响父元素以外的布局，所以父元素采用相对定位的方式