我正在研究CSS轮播，并将其插入HTML电子邮件中。代码如下。它基本上是带有单选按钮的表单，并且每次单击单选按钮的标签时，它都应通过将左侧边距更改为较小的值来滚动到下一张幻灯片。底部有一些标签应作为标签。问题是，要使选项卡位于幻灯片的顶部，我不得不在.car-thumbnails类上使用绝对位置而不是相对位置。很公平。但是现在，当我重复单击第一个或最后一个标签时，轮播会在所有所有标签之间循环。我检查了代码，就像单击“第一个或最后一个”选项卡一样，选中并取消选中所有其他单选按钮输入。为什么position：absolute会这样影响它？
我知道很多信息，但我完全茫然。
HTML：
<div class="carousel slide responsive" style="overflow:hidden;display:none;max-height:0px;width:580px;" width="580">
<input id="car-cbox-support" type="checkbox" checked="" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-1" class="car-radio car-radio1" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-2" class="car-radio car-radio2" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-3" class="car-radio car-radio3" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-4" class="car-radio car-radio4" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-5" class="car-radio car-radio5" style="display:none!important">
<div class="car-cont" style="position:relative;background-color:#ffffff;">
<div class="car-frames">
<!-- Slide 1 Main Image -->
<a href="#"><img src="/green.png" alt="" border="0"></a>
<!-- Slide 2 Main Image -->
<a href="#"><img src="/purple.png" alt="" border="0"></a>
<!-- Slide 3 Main Image -->
<a href="#"><img src="/blue.png" alt="" border="0"></a>
<!-- Slide 4 Main Image -->
<a href="#"><img src="/red.png" alt="" border="0"></a>
<!-- Slide 5 Main Image -->
<a href="#"><img src="/yellow.png" alt="" border="0"></a>
</div>
<div class="car-controls">
<!--When slide 1 (car-nav-1) is showing, clicking the left arrow should transition to slide 5 (car1-radio-5) -->
<label for="car1-radio-5" class="car-ltn car-nav-1"></label>
<!--When slide 1 (car-nav-1) is showing, clicking the right arrow should transition to slide 2 (car1-radio-2) -->
<label for="car1-radio-2" class="car-rtn car-nav-1"></label>
<!--When slide 2 (car-nav-2) is showing, clicking the left arrow should transition to slide 1 (car1-radio-1) -->
<label for="car1-radio-1" class="car-ltn car-nav-2"></label>
<!--When slide 2 (car-nav-2) is showing, clicking the right arrow should transition to slide 3 (car1-radio-3) -->
<label for="car1-radio-3" class="car-rtn car-nav-2"></label>
<!--When slide 3 (car-nav-3) is showing, clicking the left arrow should transition to slide 2 (car1-radio-2) -->
<label for="car1-radio-2" class="car-ltn car-nav-3"></label>
<!--When slide 3 (car-nav-3) is showing, clicking the right arrow should transition to slide 4 (car1-radio-4) -->
<label for="car1-radio-4" class="car-rtn car-nav-3"></label>
<!--When slide 4 (car-nav-4) is showing, clicking the left arrow should transition to slide 3 (car1-radio-3) -->
<label for="car1-radio-3" class="car-ltn car-nav-4"></label>
<!--When slide 4 (car-nav-4) is showing, clicking the right arrow should transition to slide 5 (car1-radio-5) -->
<label for="car1-radio-5" class="car-rtn car-nav-4"></label>
<!--When slide 5 (car-nav-5) is showing, clicking the left arrow should transition to slide 4 (car1-radio-4) -->
<label for="car1-radio-4" class="car-ltn car-nav-5"></label>
<!--When slide 5 (car-nav-5) is showing, clicking the right arrow should transition to slide 1 (car1-radio-1) -->
<label for="car1-radio-1" class="car-rtn car-nav-5"></label>
</div>
</div>
<div class="car-thumbnails" style="display:none;">
<div class="car-container">
<!-- Thumbnail 1 -->
<label for="car1-radio-1" class="car-thumb car-thumb-1"><p valign="middle" style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">green</p></label>
<!-- Thumbnail 2 -->
<label for="car1-radio-2" class="car-thumb car-thumb-2"><p valign="middle" style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">purple</p></label>
<!-- Thumbnail 3 -->
<label for="car1-radio-3" class="car-thumb car-thumb-3"><p valign="middle" style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">blue</p></label>
<label for="car1-radio-4" class="car-thumb car-thumb-4"><p valign="middle" style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">red</p></label>
<label for="car1-radio-5" class="car-thumb car-thumb-5"><p valign="middle" style="font-family:'Lato', Arial, Helvetica, sans-serif;font-size:22px;vertical-align:middle;width:100%;height:auto;line-height:40px;color:#ffffff;margin:0px;">yellow</p></label>
</div>
</div>
</div>
CSS：
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* bugfix for Android 4.4 to support e ~ y */
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
/* Hide Fallback content first */
.fallback {
display: none;
}
.carousel {
display: block !important;
max-height: none !important;
position: relative;
}
div[class~="aolmail_carousel"] {
display: none !important;
}
div[class~="aolmail_fallback"] {
display: block !important;
max-height: none !important;
position: relative;
}
/*
Selective blocking for clients.
- Samsung (#MessageViewBody) - no absolute positioning
- Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
*/
#MessageViewBody .fallback,
body.MsgBody .fallback {
display: block;
}
#MessageViewBody .carousel,
body.MsgBody .carousel {
display: none !important;
}
input {
display: none;
}
.carousel a {
width: 100%;
display: block;
overflow: hidden;
}
.carousel .car-frames img {
display: block!important;
width: 100% !important;
height: auto !important;
}
.carousel.responsive {
width: 100% !important;
}
.carousel.slide a {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
width: 100%;
-webkit-animation: slide-anim 15s linear infinite;
}
.carousel.slide a:nth-child(1) {
position: relative;
-webkit-animation-delay: -16s;
}
.carousel.slide a:nth-child(2) {
-webkit-animation-delay: -13s;
}
.carousel.slide a:nth-child(3) {
-webkit-animation-delay: -10s;
}
.carousel.slide a:nth-child(4) {
-webkit-animation-delay: -7s;
}
.carousel.slide a:nth-child(5) {
-webkit-animation-delay: -4s;
}
/* iOS doesn't like negative delay with translates (transform:translateX(100%);) */
/* So we use margin although it is less "smooth" */
@-webkit-keyframes slide-anim {
/* start slide in */
0% {
margin-left: 100%;
}
/* end slide in */
5% {
margin-left: 0%;
}
/* start slide out */
20% {
margin-left: 0%;
}
/* end slide out */
25% {
margin-left: -100%;
}
/* start slide out */
40% {
margin-left: -100%;
}
/* end slide out */
45% {
margin-left: -200%;
}
60% {
margin-left: -200%;
}
/* end slide out */
65% {
margin-left: -300%;
}
80% {
margin-left: -300%;
}
/* end slide out */
85% {
margin-left: -400%;
}
100% {
margin-left: -400%;
}
}
.carousel.slide .car-radio:checked~.car-cont .car-frames {
position: relative;
left: 0px;
top: 0px;
width: 500% !important;
transition: left 1s;
}
.carousel.slide .car-radio2:checked~.car-cont .car-frames {
left: -100%;
}
.carousel.slide .car-radio3:checked~.car-cont .car-frames {
left: -200%;
}
.carousel.slide .car-radio4:checked~.car-cont .car-frames {
left: -300%;
}
.carousel.slide .car-radio5:checked~.car-cont .car-frames {
left: -400%;
}
.carousel.slide .car-radio:checked~.car-cont a {
width: 20%;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(2) {
position: absolute;
left: 20%;
top: 0px;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(3) {
position: absolute;
left: 40%;
top: 0px;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(4) {
position: absolute;
left: 60%;
top: 0px;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(5) {
position: absolute;
left: 80%;
top: 0px;
}
/* Navigation arrows */
.carousel .car-ltn,
.carousel .car-rtn {
z-index: 100;
display: none;
width: 10%;
height: 100%;
position: absolute;
background-color: transparent;
top: 0px;
cursor: pointer;
}
.car-ltn {
left: 0px;
}
.car-rtn {
right: 0px;
}
.carousel .car-ltn::after {
content: url(http://media.4at5.net/email_domains/olg/0204/leftArrow.png);
width: 0;
height: 0;
position: absolute;
top: 40%;
margin-top: -8px;
-webkit-filter: drop-shadow(1px 1.5px 1px rgba(0, 0, 0, .4));
}
.carousel .car-rtn::after {
content: url(http://media.4at5.net/email_domains/olg/0204/rightArrow.png);
width: 0;
height: 0;
position: absolute;
top: 40%;
left: 10%;
margin-top: -8px;
-webkit-filter: drop-shadow(1px 1.5px 1px rgba(0, 0, 0, .4));
}
.car-ltn::after {
border-right: 0px solid #ffffff;
left: 25%;
}
.car-rtn::after {
border-left: 0px solid #ffffff;
right: 25%;
}
.carousel #car-cbox-support:checked~.car-cont .car-nav-1 {
display: block;
}
.car-radio2:checked~.car-cont .car-controls .car-nav-2,
.car-radio3:checked~.car-cont .car-controls .car-nav-3,
.car-radio4:checked~.car-cont .car-controls .car-nav-4,
.car-radio5:checked~.car-cont .car-controls .car-nav-5 {
display: block;
}
.carousel .car-radio:checked~.car-cont,
.carousel .car-radio:checked~.car-cont *,
.carousel .car-radio:checked~.car-thumbnails * {
-webkit-animation: none;
}
/* Thumbnails */
.car-thumbnails {
position:absolute !important;
display:block !important;
bottom:0px;
width:100%;
}
.carousel #car-cbox-support:checked~.car-thumbnails .car-container {
display: block!important;
text-align: center;
position: relative;
/*background-color: #473729;*/
}
.carousel .car-thumb {
width: 19.2%;
opacity: 1;
z-index: 100;
cursor: pointer;
display: inline-block;
margin: 3px 0px;
background-color: rgba(0,0,0, 0.1);
}
@-webkit-keyframes focus3-anim {
0% {
background-color: rgba(0,0,0,1);
}
20% {
background-color: rgba(72,72,72, 0.5);
}
40% {
background-color: rgba(72,72,72, 0.5);
}
60% {
background-color: rgba(72,72,72, 0.5);
}
80% {
background-color: rgba(72,72,72, 0.5);
}
100% {
background-color: rgba(0,0,0,1);
}
}
/* to eliminate use of delay */
@-webkit-keyframes focus3-anim-2 {
0% {
background-color: rgba(72,72,72, 0.5);
}
20% {
background-color: rgba(0,0,0,1);
}
40% {
background-color: rgba(72,72,72, 0.5);
}
60% {
background-color: rgba(72,72,72, 0.5);
}
80% {
background-color: rgba(72,72,72, 0.5);
}
100% {
background-color: rgba(72,72,72, 0.5);
}
}
@-webkit-keyframes focus3-anim-3 {
0% {
background-color: rgba(72,72,72, 0.5);
}
20% {
background-color: rgba(72,72,72, 0.5);
}
40% {
background-color: rgba(0,0,0,1);
}
60% {
background-color: rgba(72,72,72, 0.5);
}
80% {
background-color: rgba(72,72,72, 0.5);
}
100% {
background-color: rgba(72,72,72, 0.5);
}
}
@-webkit-keyframes focus3-anim-4 {
0% {
background-color: rgba(72,72,72, 0.5);
}
20% {
background-color: rgba(72,72,72, 0.5);
}
40% {
background-color: rgba(72,72,72, 0.5);
}
60% {
background-color: rgba(0,0,0,1);
}
80% {
background-color: rgba(72,72,72, 0.5);
}
100% {
background-color: rgba(72,72,72, 0.5);
}
}
@-webkit-keyframes focus3-anim-5 {
0% {
background-color: rgba(72,72,72, 0.5);
}
20% {
background-color: rgba(72,72,72, 0.5);
}
40% {
background-color: rgba(72,72,72, 0.5);
}
60% {
background-color: rgba(72,72,72, 0.5);
}
80% {
background-color: rgba(0,0,0, 1);
}
100% {
background-color: rgba(72,72,72, 0.5);
}
}
.car-thumb:nth-child(1) {
-webkit-animation: focus3-anim 15s ease-in infinite;
}
.car-thumb:nth-child(2) {
/*-webkit-animation: focus3-anim 15s linear 5s infinite;*/
-webkit-animation: focus3-anim-2 15s ease-in infinite;
}
.car-thumb:nth-child(3) {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-3 15s ease-in infinite;
}
.car-thumb:nth-child(4) {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-4 15s ease-in infinite;
}
.car-thumb:nth-child(5) {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-5 15s ease-in infinite;
}
.car-radio:checked~.car-thumbnails .car-thumb:nth-child(1), {
background-color: rgba(72,72,72,0.5) !important;
}
.car-radio1:checked~.car-thumbnails .car-thumb:nth-child(1) {
background-color: rgba(0, 0, 0, 1);
}
.car-radio2:checked~.car-thumbnails .car-thumb:nth-child(2),
.car-radio3:checked~.car-thumbnails .car-thumb:nth-child(3),
.car-radio4:checked~.car-thumbnails .car-thumb:nth-child(4),
.car-radio5:checked~.car-thumbnails .car-thumb:nth-child(5){
background-color: rgba(0, 0, 0, 1);
}
}
@media only screen and (max-width: 580px) {
.carousel .car-thumb {
width: 19.2%;
opacity: 1;
z-index: 100;
cursor: pointer;
display: inline-block;
margin: 0px 0px;
background-color:rgba(72,72,72,0.5);
}
}
答案 0 :(得分：1)
这是因为当您单击最左侧和最右侧的选项卡时，实际上是在单击选项卡上方的左右箭头（箭头设置为100％高度）。
您可以通过将标签容器的z-index设置为大于箭头的z-index来解决此问题：
os.environ['PATH'] += ":/var/task/texlive/2017/bin/x86_64-linux/"
os.environ['HOME'] = "/tmp/latex/"
os.environ['PERL5LIB'] = "/var/task/texlive/2017/tlpkg/TeXLive/"