块元素前后都要独占一行而內联元素不需要，这是基础。
position:fixed 当元素设置该属性之后,这个元素脱离文档流,且不跟随页面的滚动.这是和absolute的最大区别.当元素的高度大于可视区域的时候,铺满整个窗口之后下面的就看不到了,因为fixed不随页面滚动.设置absolute 的时候就可以看的到了.第二个区别是fixed是相对window定位的,父元素可以认为是window窗口.而position虽然脱离原来的文档流,但是如果设置了父元素为relative或者absolute,则相对父元素定位,否则一直向上找,直到找到html根元素.
position：relative 定位相对的是元素本身应该出现的位置，不会脱离文档流，也即，虽然该元素相对本应该出现在的位置发生了偏移，但是本应该占的位置还会保留，下一个元素不能忽视它的存在。然后通过top,left等来偏移,同时原来的位置继续保留.相当于要占据两个位置.偏移后并不会把下面的元素想下挤,而是和下面的元素,不管是文本还是块元素,重叠起来,通过设置z-index来移动.
relative布局效果
position：absolute 相对的是第一个设置了relative或者absolute定位的祖先元素的位置，且会脱离文档流。
absolute布局效果
flota：left 元素脱离文档流.会占据新的位置空间,原先占据的位置就释放了出来。其他的元素,比如文字,会环绕其中.比如一个块元素,当没设置浮动的时候,它会独占一行,兄弟元素或者文本会在新的一行开始,设置浮动之后,下面的内容会在之后开始排版,形成环绕效果.
清除浮动:clear:both;是对受到浮动影响的后面的元素进行的.
另一种清除浮动的方式是对受到影响的元素设置:overflow:hidden;width:100%;
让多张图重叠到一起的解决方案：设置个父元素来装这些东西
该父元素设置overflow：hidden；position：relative
子元素position:absolute。
网友评论