誰(shuí)幫我解釋下下面的代碼
.dropdown-menu{ ? ?left:100%; ? ?top:0; } 這段代碼的效果我看到了，但是誰(shuí)能解釋下這么設(shè)置的原理呢，特別是這個(gè)Left,和父元素有什么關(guān)系嗎
wangao4321
2016-08-11
2 回答
舉報(bào)
0/150
提交
取消
2016-08-12
.dropdown-menu {
? position: absolute;
? top: 100%;
? left: 0;
? z-index: 1000;
? display: none;
? float: left;
...????省略其他
｝
這是源代碼 可以看出使用了相對(duì)定位 這樣已經(jīng)脫離了正常文檔流，接著的top：100%以及l(fā)eft：0是用來(lái)定位的
.btn-group,
.btn-group-vertical {
? position: relative;
? display: inline-block;
? vertical-align: middle;
}
這是父元素的樣式 可以看出有個(gè)絕對(duì)定位，接著top：100%指的就是父元素的高度，然后結(jié)果就是你點(diǎn)擊后這個(gè)菜單就顯示在這個(gè)父元素的下面（因?yàn)楦冈剡€有個(gè)box-sizing：border-box，所以可以無(wú)視padding跟margin所帶來(lái)的負(fù)效果）left：0就是左對(duì)齊了。
最后 雖然跟你說(shuō)的樣式不同 不過都是大同小異
2016-08-12
在bootstrap.min.css的2876行，定義了.dropdown-menu的父類.dropdown{
position:relative;}(我查的)。因?yàn)楦冈赜衟osition屬性，所以.dropdown-menu的position：absolute相對(duì)于父元素定位。top:100%的意思是在下拉菜單底部展開,left:0指
與父元素左端對(duì)齊。你的代碼好像寫錯(cuò)了。。。。