哪位 css 大神帮我解释一下下面三个 demo。。。

[crazyxhz]

• 外包 div 设置了 relative 但是没有设置 top ， left 等位置，这种设法是不是就等同于 position:static; 为啥没有在新的块上？

demo1

• 同 demo1 ，只是第一个 div 长宽设置大了一点，为啥偏向下移了 100px

demo2

• 把 content 的 position 从 relative 改为 absolute ，这个效果可以理解

demo3

感谢v2ex的大神，mdn是好东西啊 原来margin collapse不但相邻元素会发生，第一个或者最后一个子节点也会发生： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

解决方法，wrapper加一个border或者padding ，或者把wrapper变成 Block formatting context ，就如回复中提到的overflow:hidden

[vizards]

在一个相对定位（ position 属性的值为 relative ）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

http://zh.learnlayout.com/position.html

[crazyxhz]

https://jsfiddle.net/yvbtcjoa/
https://jsfiddle.net/yvbtcjoa/1/
https://jsfiddle.net/yvbtcjoa/2/

[crazyxhz]

@vizards 这个我知道啊。。。

[vizards]

r#3 @crazyxhz 之前没看清，，不好意思，你给 wapper 设置一个 overflow:hidden 应该就是你想要的效果了

[vizards]

r#4 @vizards wapper => wrapper

[vizards]

CSS2.1 的盒模型中规定

[vizards]

所有毗邻的两个或更多盒元素的 margin 将会合并为一个 margin 共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、 Padding 或 Border 分隔。这就是外边距共享问题。所以只要破坏掉毗邻的要求就可以了。

[freeminder]

第一个 demo 是粉色方框的负 marigin 折叠了

[freeminder]

第二个 demo 也是 margin 折叠，按照你的写法红框和蓝框直接始终重合粉框的负 margin

[chztv]

给 content 加上 position: absolute 不就行了，你就想要粉色那个 box 居中的效果吧？

[chztv]

@crazyxhz absolute 和 relative 一定要明白其含义，你的 content 到底想要相对还是绝对定位？相对的话不要用 margin 来定位，可以在 wrapper 里用 padding 更方便一些；绝对的话，可以用 top left right bottom 设置来定位。

[crazyxhz]

@chztv
嗯，主要是想了解 1,2 造成的原因，功能实现有很多种方法