如何将CSS top属性的参照点设为父元素底部

要让下拉菜单（ul）相对于父按钮底部偏移5px，且不依赖父元素固定高度，有以下几种实现方式：

基础CSS实现：top: 100% + margin-top #

top: 100%会让绝对定位元素的顶部对齐相对定位父元素的底部，再通过margin-top设置偏移量即可：

.bouton-deroulant{
  @extend .bouton;
  position: relative;

  ul{
    display:none;
    background-color: white;
    border-radius: 10px;
    padding:0;
    margin:0;
    list-style:none;
    text-align:center;
    width: 100%;
    box-shadow: 2px 2px 2px 0 #c8b4a8;
  }

  &:hover ul {
    display:block;
    position:absolute;
    top: 100%; /* 对齐父元素底部 */
    margin-top: 5px; /* 向下偏移5px */
    left: 0;
  }
}

替代方案：使用transform平移 #

如果不想用margin影响布局，可结合transform: translateY()实现偏移：

&:hover ul {
  display:block;
  position:absolute;
  top: 100%;
  transform: translateY(5px); /* 向下平移5px */
  left: 0;
}

PostCSS优化方案：使用calc计算值 #

借助PostCSS对calc()的良好支持，可直接写复合表达式一步到位：

&:hover ul {
  display:block;
  position:absolute;
  top: calc(100% + 5px); /* 直接定位到父元素底部+5px的位置 */
  left: 0;
}

以上三种方法均无需依赖父元素的具体高度，能自适应不同按钮的尺寸变化。

内容的提问来源于stack exchange，提问作者Polaire