CSS 定位在父元素之外
我需要你的帮助来解决 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;
}
}
智慧大石3回答
-
达令说
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> -
元芳怎么了
这是一个 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> -
有只小跳蛙
您已成功移动开始时间，但您已overflow: hidden设置ul，因此它会按要求隐藏。ul.day-timeline { overflow: visible; }从那里出发
随时随地看视频慕课网APP
相关分类
Html5