问答详情
源自:5-10 按钮(垂直分组)

谁帮我解释下下面的代码

.dropdown-menu{    left:100%;    top:0; } 这段代码的效果我看到了,但是谁能解释下这么设置的原理呢,特别是这个Left,和父元素有什么关系吗

提问者:wangao4321 2016-08-11 17:33

个回答

  • Hallz
    2016-08-12 11:32:33
    已采纳

    .dropdown-menu {

      position: absolute;

      top: 100%;

      left: 0;

      z-index: 1000;

      display: none;

      float: left;

    ...    省略其他

    这是源代码 可以看出使用了相对定位 这样已经脱离了正常文档流,接着的top:100%以及left:0是用来定位的

    .btn-group,

    .btn-group-vertical {

      position: relative;

      display: inline-block;

      vertical-align: middle;

    }

    这是父元素的样式 可以看出有个绝对定位,接着top:100%指的就是父元素的高度,然后结果就是你点击后这个菜单就显示在这个父元素的下面(因为父元素还有个box-sizing:border-box,所以可以无视padding跟margin所带来的负效果)left:0就是左对齐了。

    最后 虽然跟你说的样式不同 不过都是大同小异

  • 梦里芊寻
    2016-08-12 11:28:49

    在bootstrap.min.css的2876行,定义了.dropdown-menu的父类.dropdown{

    position:relative;}(我查的)。因为父元素有position属性,所以.dropdown-menu的position:absolute相对于父元素定位。top:100%的意思是在下拉菜单底部展开,left:0指

    与父元素左端对齐。你的代码好像写错了。。。。