html - 绝对定位破坏了我的 css 轮播

标签 html css html-email

我正在制作一个 CSS 轮播，我将把它插入到 HTML 电子邮件中。它基本上是一个带有单选按钮的表单。每一个 单击单选按钮的标签时，它应该通过将左边距更改为较小来滚动到下一张幻灯片 值(value)。底部的选项卡应充当标签。

问题是，要让选项卡位于幻灯片顶部，我必须使用绝对定位而不是相对定位 .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);
    }
}

最佳答案

这是因为当您单击最左侧和最右侧的选项卡时，您实际上是在单击选项卡上方的向左和向右箭头(箭头设置为 100% 高度)。

您可以通过将选项卡容器的 z-index 设置为大于箭头的 z-index 来解决此问题:

/* Thumbnails */
.car-thumbnails {
  position:absolute !important;
  display:block !important;
  bottom:0px;
  width:100%;
  z-index: 101;
}

fiddle :http://jsfiddle.net/69gvwzf4/1/

关于html - 绝对定位破坏了我的 css 轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52264993/

上一篇：css - 是否可以在透明矢量/svg 周围添加 1px 边框？

下一篇：javascript - 如何禁用 Bootstrap 中的崩溃

相关文章：

html - 网站的移动 View 菜单

javascript - jQuery:如何根据输入值启用/禁用按钮？

css - 使用 grid 而不是 flex 在最后一行排列一些元素

javascript - 悬停效果与 JavaScript

html - 在 IE 中无法点击的链接

html - GRID 元素右对齐

php - 更改读取文件文本输出的颜色

html - Foundation 电子邮件中的 HTML 图像不符合 Outlook 中的大小样式的问题

HTML电子邮件链接颜色困境

css - css 中填充、边距和透明边框的替代方案？

©2024 IT工具网  联系我们