鍍金池/ 問(wèn)答/HTML/ absolute元素, top和margin-top為什么可以同時(shí)作用？

absolute元素, top和margin-top為什么可以同時(shí)作用？

在學(xué)習(xí)垂直居中時(shí)，一種實(shí)現(xiàn)是這樣：

.center {
position: absolute;
height: 200px;
top:50%;
margin-top:-100px;
}

我感覺(jué)有點(diǎn)別扭，因?yàn)橛衜argin-top意味著top不是50%了, 也不是margin-top把top覆蓋了, 只是在居中的位置向上移動(dòng)著100px, 為什么會(huì)有這樣的效果呢？

回答
編輯回答
枕頭人

absolute定位與margin定位其實(shí)是沒(méi)有什么沖突的，無(wú)論absolute元素時(shí)候設(shè)置了left/top值，其margin屬性值都是可以起作用的。
下面展示的是沒(méi)有l(wèi)eft/top值的absolute元素的margin定位。
http://www.zhangxinxu.com/wor...

2017年5月22日 07:42
編輯回答
祈歡

margin也是盒模型中的一部分
可能margin是負(fù)的有點(diǎn)抽象 你可以這樣想 height是100px margin-top是100px 那它整個(gè)盒模型的高度就應(yīng)該是200px（這里就不算padding和border了） 而定位定的整個(gè)盒子 所以?xún)蓚€(gè)并不沖突

2018年4月21日 00:09
編輯回答
歆久

“為什么”可以同時(shí)作用，這個(gè)問(wèn)題得問(wèn)規(guī)范的制定者，我覺(jué)得就不用深究了。

這里 margin-top:-100px 的意思是，從當(dāng)前定位的位置再向上移動(dòng) 100px，如果整個(gè) DOM 的高度是 200px 的話(huà)，就可以垂直居中了。

2017年5月29日 03:09
編輯回答
別逞強(qiáng)

一個(gè)盒模型，一個(gè)是定位

2017年9月16日 14:13
編輯回答
失心人

垂直居中分為兩種情況，一是元素本身，二是元素內(nèi)容。你所寫(xiě)的是前者，定位margin相對(duì)于其它元素的邊界。你可以找張紙畫(huà)一下。

2017年5月31日 16:59