CSS 定位在父元素之外

Question

我需要你的帮助来解决 CSS 问题。对于我的一个项目，我需要设计一个纯 CSS 时间间隔查看器。由于图片总是比长文本更好，您可以在下面看到我的工作结果：但是，我不想将开始/结束时间放入时间间隔中，而是想将开始时间放置在顶部/左侧上方，将结束时间放置在底部/右侧下方。我想要这样的结果这是 HTML：<ul class="day-timeline">  <li class="time-interval" style="left:4%; width:46%">    <label class="time start-time">01:00</label>    <label class="time end-time">12:00</label>  </li>  <li class="time-interval" style="left:58%; width:17%">    <label class="time start-time">14:00</label>    <label class="time end-time">18:00</label>  </li></ul><ul class="day-timeline day-timeline-closed">  <li class="time-interval closed">    <label class="time">Closed</label>  </li></ul>这是 CSS：* {  box-sizing: border-box;}ul.day-timeline {  padding: 0;  border-left: 1px solid black;  border-right: 1px solid black;  height: 20px;  overflow: hidden;  position: relative;  &:after {    content: '';    width: 100%;    height: 1px;    background: black;    display: block;    position: relative;    top: 10px;  }  li {    display: block;    position: absolute;    background-color: #bed4a7;    border: 1px solid green;    z-index: 1;    padding-left: 5px;    border-radius: 3px;    height: 100%;    font-weight: bold;    width: 100%;    &.closed {      background-color: lightgray;      border: 1px solid black;      label {        color :black;      }    }    label {      font-size: 0.75rem;      color: green;      &.start-time {        position: absolute;        top:-10px;        left:0;      }    }    label + label {      &:before {        content: '-';        padding: 0 0.25rem;      }    }  }}ul.day-timeline-closed {  border: none;}您可以在这里看到它：https ://codepen.io/zannkukai/pen/XWbYXjG 。尽管进行了很多尝试，但我从未得到正确的结果:'(CSS大师是否能够帮助我解决我的问题。我认为问题出在定位上。但是我使用的标签范围是否超出label了position:absolute; top:-10px范围父级并且不显示:'(label {  font-size: 0.75rem;  color: green;  &.start-time {    position: absolute;    top:-10px;    left:0;  }} 

Answer 1

overflow: hidden从ul.day-timeline中删除，然后您可以在父元素之外写入时间。

听听 ul.day-timeline 的归因：

ul.day-timeline {

  padding: 0;

  border-left: 1px solid black;

  border-right: 1px solid black;

  height: 20px;

  //overflow: hidden;

  position: relative;

并听到整个 css：

* {

  box-sizing: border-box;

}

ul.day-timeline {

  padding: 0;

  border-left: 1px solid black;

  border-right: 1px solid black;

  height: 20px;

  //overflow: hidden;

  position: relative;

  &:after {

    content: '';

    width: 100%;

    height: 1px;

    background: black;

    display: block;

    position: relative;

    top: 10px;

  }

  li {

    display: block;

    position: absolute;

    background-color: #bed4a7;

    border: 1px solid green;

    z-index: 1;

    padding-left: 5px;

    border-radius: 3px;

    height: 100%;

    font-weight: bold;

    width: 100%;

    &.closed {

      background-color: lightgray;

      border: 1px solid black;

      label {

        color :black;

      }

    }

    label {

      font-size: 0.75rem;

      color: green;

      &.start-time-first {

        position: absolute;

        top: -15px;

        left: 0px;

      }

      &.end-time-first {

        position: absolute;

        top: 20px;

        right: 5px;

      }

      &.start-time-second {

        position: absolute;

        top: -15px;

        left: 0px;

      }

      &.end-time-second {

        position: absolute;

        top: 20px;

        right: 5px;

      }

    }

  }

}

ul.day-timeline-closed {

  border: none;

}

以及您必须重命名以定位时间的类：

HTML 代码片段

  <li class="time-interval" style="left:4%; width:46%">

    <label class="time start-time-first">01:00</label>

    <label class="time end-time-first">12:00</label>

  </li>

  <li class="time-interval" style="left:58%; width:17%">

    <label class="time start-time-second">14:00</label>

    <label class="time end-time-second">18:00</label>

  </li>

Answer 2

这是一个 CSS 的工作片段，我还包括一个codepen，基本上你只需要使用 left 和 right CSS 属性即可在使用后工作position:absolute，最后我添加right:0以强制其位置向右，left:0用于强制其位置向左的开始时间，以及 x 轴位置的顶部和底部 CSS 属性。

* {

  box-sizing: border-box;

}

ul.day-timeline {

  padding: 0;

  border-left: 1px solid black;

  border-right: 1px solid black;

  height: 20px;

  position: relative;

}

ul.day-timeline:after {

  content: '';

  width: 100%;

  height: 1px;

  background: black;

  display: block;

  position: relative;

  top: 10px;

}

ul.day-timeline li {

  display: block;

  position: absolute;

  background-color: #bed4a7;

  border: 1px solid green;

  z-index: 1;

  padding-left: 5px;

  border-radius: 3px;

  height: 100%;

  font-weight: bold;

  width: 100%;

}

ul.day-timeline li.closed {

  background-color: lightgray;

  border: 1px solid black;

}

ul.day-timeline li.closed label {

  color: black;

}

ul.day-timeline li label {

  font-size: 0.75rem;

  color: green;

}

ul.day-timeline li label.start-time-first {

  position: absolute;

  top: -15px;

  left: 0px;

}

ul.day-timeline li label.end-time-first {

  position: absolute;

  top: 20px;

  right: 0;

}

ul.day-timeline li label.start-time-second {

  position: absolute;

  top: -15px;

  left: 0px;

}

ul.day-timeline li label.end-time-second {

  position: absolute;

  top: 20px;

  right: 0;

}

ul.day-timeline-closed {

  border: none;

}

<ul class="day-timeline">

  <li class="time-interval" style="left:4%; width:46%">

    <label class="time start-time-first">01:00</label>

    <label class="time end-time-first">12:00</label>

  </li>

  <li class="time-interval" style="left:58%; width:17%">

    <label class="time start-time-second">14:00</label>

    <label class="time end-time-second">18:00</label>

  </li>

</ul>

<ul class="day-timeline day-timeline-closed">

  <li class="time-interval closed">

    <label class="time">Closed</label>

  </li>

</ul>

Answer 3

您已成功移动开始时间，但您已overflow: hidden设置ul，因此它会按要求隐藏。ul.day-timeline { overflow: visible; }从那里出发