HTML/CSS 单选按钮由于位于无线电控制的选项卡容器内而无法点击？

Question

我创建了一组单选按钮，让用户可以回答一组问题。我设置的 HTML 在新的 html 页面上完美运行，但当放置在预期的容器内时，它们变得无响应且不可点击。我假设这是因为与放置在容器内的单选按钮发生冲突，该容器附加到由 css 仅单选按钮 hack 控制的选项卡。这些选项卡使用单选按钮选择器效果非常好。

HTML 单独工作，所以我知道问题出在我的 CSS 文件中。

有人知道如何解决此冲突吗？

这是我的代码...

:root {
    --primary: #0162a4;
    --primary_med: #5084a7;
    --primary_dark: #113255;
    --light: #ffffff;
    --dark: #000000;
    --shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
    --shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678), 0px -11px 8px -10px rgba(255, 255, 255, 0.678);
    --overlay: rgb(255, 255, 255, 0.15);
    --overlay-blk: rgba(0, 0, 0, 0.15);
    --gradient: linear-gradient(to bottom right, #113255, #0162a4);
    
}

@font-face {
    font-family: 'walkway';
    src: url('/static/fonts/Walkway_Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'walkway';
    src: url('/static/fonts/Walkway_Black-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

.container {
  width: 500px;
}
.container {
    padding-left: 10px;
}

.tabs {
    position: relative;
    margin: 0;
}

.tabs::before,
.tabs::after {
    content: "";
    display: table;
}

.tabs::after {
    clear: both;
}

.tab {
    width:110px;
    float: left;
    padding-right: 6px;
    Padding-top: 1px;
}

.tab-switch {
    display: none;
}

.tab-label {
    font-family: 'walkway';
    font-weight: bold;
    position: relative;
    display: block;
    height: 32px;
    text-align: center;
    background: var(--primary_dark);
    color: #fff;
    cursor: pointer;
    padding: 5px;
    font-size: 14px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.tab-switch:checked+.tab-label {  
    color: var(--light);
    border-bottom: 0;
    z-index: 2;
    top: -0.0625rem;
    font-size: 16px;
    font-weight: 700;
}

.tab-content {
    height: 12rem;
    position: absolute;

    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 1px solid;
    border-color: #6386b6;

    z-index: 1;
    top: 31px;
    left: 0;
    background-image: linear-gradient(to bottom right, rgb(58, 82, 112), rgb(65, 117, 167));
    opacity: 0;
    height: 343px;
    width: 100%;
    padding: 20px;
    gap: 20px;
    display: grid;

    grid-template-areas:
    'question-1 rating1'
    'question-2 rating2'
    'question-3 rating3'
    'question-4 rating4'
    'question-5 rating5';

    grid-template-columns: 330px 140px;
    grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}

.question-1 {grid-area: question-1;}
.question-2 {grid-area: question-2;}
.question-3 {grid-area: question-3;}
.question-4 {grid-area: question-4;}
.question-5 {grid-area: question-5;}
.rating1 {grid-area: rating1;}
.rating2 {grid-area: rating2;}
.rating3 {grid-area: rating3;}
.rating4 {grid-area: rating4;}
.rating5 {grid-area: rating5;}

.question-1, .question-2, .question-3, .question-4, .question-5 {
    background-color: rgb(255, 255, 255, 0.85);
    border-radius: 25px;
    border: 1px solid;
    border-color:rgb(0, 0, 0);
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'walkway';
    font-weight: bold;
    text-align: center;
}

.tab:first-child .tab-switch:checked+.tab-label {
    background-image: linear-gradient(to bottom right, rgb(59, 81, 110), rgb(62, 84, 117));
    border: 1px solid;
    border-bottom: 0px;
    border-color: #6386b6;
}

.tab:nth-child(2) .tab-switch:checked+.tab-label {
    background-image: linear-gradient(to bottom right, rgb(64, 91, 122), rgb(63, 88, 123));
    border: 1px solid;
    border-bottom: 0px;
    border-color: #6386b6;
}

.tab:nth-child(3) .tab-switch:checked+.tab-label {
    background-image: linear-gradient(to bottom right, rgb(61, 91, 127), rgb(64, 92, 128));
    border: 1px solid;
    border-bottom: 0px;
    border-color: #6386b6;
}
.tab:last-child .tab-switch:checked+.tab-label {
    background-image: linear-gradient(to bottom right, rgb(61, 94, 132), rgb(66, 96, 135));
    border: 1px solid;
    border-bottom: 0px;
    border-color: #6386b6;
}

.tab-switch:checked+label+.tab-content {
    z-index: 1;
    opacity: 1;
}
.tab:not(:first-child) .tab-switch:checked+label+.tab-content {
    border-top-left-radius: 8px;
}

                <div class="container">
                    <div class="tabs">
                        <div class="tab">
                            <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
                            <label for="tab-1" class="tab-label">Rate it</label>
                                <div class="tab-content">
                                    <div class="question-1">
                                        <label>Question 1</label>
                                    </div>
                                    <div class="question-2">
                                        <label>Question 2</label>
                                    </div>
                                    <div class="question-3">
                                        <label>Question 3</label>
                                    </div>
                                    <div class="question-4">
                                        <label>Question 4</label>
                                    </div>
                                    <div class="question-5">
                                        <label>Question 5</label>
                                    </div>
                                    <div class="rating1">
                                        <div class="rating">
                                            <input type="radio" name="star1" id="rad-1"><label for="rad-1">
                                            </label>
                                            <input type="radio" name="star1" id="rad-2"><label for="rad-2">
                                            </label>
                                            <input type="radio" name="star1" id="rad-3"><label for="rad-3">
                                            </label>
                                            <input type="radio" name="star1" id="rad-4"><label for="rad-4">
                                            </label>
                                            <input type="radio" name="star1" id="rad-5"><label for="rad-5">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="rating2">
                                        <div class="rating">
                                            <input type="radio" name="star2" id="rad-6"><label for="rad-6">
                                            </label>
                                            <input type="radio" name="star2" id="rad-7"><label for="rad-7">
                                            </label>
                                            <input type="radio" name="star2" id="rad-8"><label for="rad-8">
                                            </label>
                                            <input type="radio" name="star2" id="rad-9"><label for="rad-9">
                                            </label>
                                            <input type="radio" name="star2" id="rad-10"><label for="rad-10">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="rating3">
                                        <div class="rating">
                                            <input type="radio" name="star3" id="rad-11"><label for="rad-11">
                                            </label>
                                            <input type="radio" name="star3" id="rad-12"><label for="rad-12">
                                            </label>
                                            <input type="radio" name="star3" id="rad-13"><label for="rad-13">
                                            </label>
                                            <input type="radio" name="star3" id="rad-14"><label for="rad-14">
                                            </label>
                                            <input type="radio" name="star3" id="rad-15"><label for="rad-15">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="rating4">
                                        <div class="rating">
                                            <input type="radio" name="star4" id="rad-16"><label for="rad-16">
                                            </label>
                                            <input type="radio" name="star4" id="rad-17"><label for="rad-17">
                                            </label>
                                            <input type="radio" name="star4" id="rad-18"><label for="rad-18">
                                            </label>
                                            <input type="radio" name="star4" id="rad-19"><label for="rad-19">
                                            </label>
                                            <input type="radio" name="star4" id="rad-0"><label for="rad-20">
                                            </label>
                                        </div>
                                    </div>
                                    <div class="rating5">
                                        <div class="rating">
                                            <input type="radio" name="star5" id="rad-21"><label for="rad-21">
                                            </label>
                                            <input type="radio" name="star5" id="rad-22"><label for="rad-22">
                                            </label>
                                            <input type="radio" name="star5" id="rad-23"><label for="rad-23">
                                            </label>
                                            <input type="radio" name="star5" id="rad-24"><label for="rad-24">
                                            </label>
                                            <input type="radio" name="star5" id="rad-25"><label for="rad-25">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="tab">
                            <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
                            <label for="tab-2" class="tab-label">Buzz it</label>
                                <div class="tab-content"> </div>
                        </div>
                        <div class="tab">
                            <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
                            <label for="tab-3" class="tab-label">Vibe it</label>
                                <div class="tab-content"> </div>
                        </div>
                        <div class="tab">
                            <input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
                            <label for="tab-4" class="tab-label">Review it</label>
                                <div class="tab-content"> </div>
                        </div>
                    </div>
                </div>

Answer 1

解决你的问题其实很简单：

在CSS规则.tab-content { .. }中将z-index: 1更改为z-index: 0，将其设置为默认渲染层。

因为这意味着浏览器将其视为根本未设置 z-index，因此它基本上已过时。我将它留在原处以显示您的错误是什么，但作为替代选项，您可以安全地完全删除 z-index: 1 以使代码正常工作。

您可能想对 Using z-index and the The stacking context（均在 MDN 上）做一些研究。

代码，第 97 行 CSS 禁用规则（或搜索 DISABLED）

:root {
    --primary: #0162a4;
    --primary_med: #5084a7;
    --primary_dark: #113255;
    --light: #ffffff;
    --dark: #000000;
    --shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
    --shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678),
        0px -11px 8px -10px rgba(255, 255, 255, 0.678);
    --overlay: rgb(255, 255, 255, 0.15);
    --overlay-blk: rgba(0, 0, 0, 0.15);
    --gradient: linear-gradient(to bottom right, #113255, #0162a4);
}

@font-face {
    font-family: "walkway";
    src: url("/static/fonts/Walkway_Bold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "walkway";
    src: url("/static/fonts/Walkway_Black-webfont.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

.container {
    width: 500px;
}
.container {
    padding-left: 10px;
}

.tabs {
    position: relative;
    margin: 0;
}

.tabs::before,
.tabs::after {
    content: "";
    display: table;
}

.tabs::after {
    clear: both;
}

.tab {
    width: 110px;
    float: left;
    padding-right: 6px;
    padding-top: 1px;
}

.tab-switch {
    display: none;
}

.tab-label {
    font-family: "walkway";
    font-weight: bold;
    position: relative;
    display: block;
    height: 32px;
    text-align: center;
    background: var(--primary_dark);
    color: #fff;
    cursor: pointer;
    padding: 5px;
    font-size: 14px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.tab-switch:checked + .tab-label {
    color: var(--light);
    border-bottom: 0;
    z-index: 2;
    top: -0.0625rem;
    font-size: 16px;
    font-weight: 700;
}

.tab-content {
    height: 12rem;
    position: absolute;

    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 1px solid;
    border-color: #6386b6;

/*    z-index: 0; /* DISABLED, was z-index: 1 */
    top: 31px;
    left: 0;
    background-image: linear-gradient(
        to bottom right,
        rgb(58, 82, 112),
        rgb(65, 117, 167)
    );
    opacity: 0;
    height: 343px;
    width: 100%;
    padding: 20px;
    gap: 20px;
    display: grid;

    grid-template-areas:
        "question-1 rating1"
        "question-2 rating2"
        "question-3 rating3"
        "question-4 rating4"
        "question-5 rating5";

    grid-template-columns: 330px 140px;
    grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}

.question-1 {
    grid-area: question-1;
}
.question-2 {
    grid-area: question-2;
}
.question-3 {
    grid-area: question-3;
}
.question-4 {
    grid-area: question-4;
}
.question-5 {
    grid-area: question-5;
}
.rating1 {
    grid-area: rating1;
}
.rating2 {
    grid-area: rating2;
}
.rating3 {
    grid-area: rating3;
}
.rating4 {
    grid-area: rating4;
}
.rating5 {
    grid-area: rating5;
}

.question-1,
.question-2,
.question-3,
.question-4,
.question-5 {
    background-color: rgb(255, 255, 255, 0.85);
    border-radius: 25px;
    border: 1px solid;
    border-color: rgb(0, 0, 0);
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "walkway";
    font-weight: bold;
    text-align: center;
}

.tab:first-child .tab-switch:checked + .tab-label {
    background-image: linear-gradient(
        to bottom right,
        rgb(59, 81, 110),
        rgb(62, 84, 117)
    );
    border: 1px solid;
    border-bottom: 0px;
    border-color: #6386b6;
}

.tab:nth-child(2) .tab-switch:checked + .tab-label {
    background-image: linear-gradient(
        to bottom right,
        rgb(64, 91, 122),
        rgb(63, 88, 123)
    );
    border: 1px solid;
    border-bottom: 0px;
    border-color: #6386b6;
}

.tab:nth-child(3) .tab-switch:checked + .tab-label {
    background-image: linear-gradient(
        to bottom right,
        rgb(61, 91, 127),
        rgb(64, 92, 128)
    );
    border: 1px solid;
    border-bottom: 0px;
    border-color: #6386b6;
}
.tab:last-child .tab-switch:checked + .tab-label {
    background-image: linear-gradient(
        to bottom right,
        rgb(61, 94, 132),
        rgb(66, 96, 135)
    );
    border: 1px solid;
    border-bottom: 0px;
    border-color: #6386b6;
}

.tab-switch:checked + label + .tab-content {
    z-index: 1;
    opacity: 1;
}
.tab:not(:first-child) .tab-switch:checked + label + .tab-content {
    border-top-left-radius: 8px;
}

<div class="container">
    <div class="tabs">
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
            <label for="tab-1" class="tab-label">Rate it</label>
            <div class="tab-content">
                <div class="question-1">
                    <label>Question 1</label>
                </div>
                <div class="question-2">
                    <label>Question 2</label>
                </div>
                <div class="question-3">
                    <label>Question 3</label>
                </div>
                <div class="question-4">
                    <label>Question 4</label>
                </div>
                <div class="question-5">
                    <label>Question 5</label>
                </div>
                <div class="rating1">
                    <div class="rating">
                        <input type="radio" name="star1" id="rad-1"><label for="rad-1">
                        </label>
                        <input type="radio" name="star1" id="rad-2"><label for="rad-2">
                        </label>
                        <input type="radio" name="star1" id="rad-3"><label for="rad-3">
                        </label>
                        <input type="radio" name="star1" id="rad-4"><label for="rad-4">
                        </label>
                        <input type="radio" name="star1" id="rad-5"><label for="rad-5">
                        </label>
                    </div>
                </div>
                <div class="rating2">
                    <div class="rating">
                        <input type="radio" name="star2" id="rad-6"><label for="rad-6">
                        </label>
                        <input type="radio" name="star2" id="rad-7"><label for="rad-7">
                        </label>
                        <input type="radio" name="star2" id="rad-8"><label for="rad-8">
                        </label>
                        <input type="radio" name="star2" id="rad-9"><label for="rad-9">
                        </label>
                        <input type="radio" name="star2" id="rad-10"><label for="rad-10">
                        </label>
                    </div>
                </div>
                <div class="rating3">
                    <div class="rating">
                        <input type="radio" name="star3" id="rad-11"><label for="rad-11">
                        </label>
                        <input type="radio" name="star3" id="rad-12"><label for="rad-12">
                        </label>
                        <input type="radio" name="star3" id="rad-13"><label for="rad-13">
                        </label>
                        <input type="radio" name="star3" id="rad-14"><label for="rad-14">
                        </label>
                        <input type="radio" name="star3" id="rad-15"><label for="rad-15">
                        </label>
                    </div>
                </div>
                <div class="rating4">
                    <div class="rating">
                        <input type="radio" name="star4" id="rad-16"><label for="rad-16">
                        </label>
                        <input type="radio" name="star4" id="rad-17"><label for="rad-17">
                        </label>
                        <input type="radio" name="star4" id="rad-18"><label for="rad-18">
                        </label>
                        <input type="radio" name="star4" id="rad-19"><label for="rad-19">
                        </label>
                        <input type="radio" name="star4" id="rad-0"><label for="rad-20">
                        </label>
                    </div>
                </div>
                <div class="rating5">
                    <div class="rating">
                        <input type="radio" name="star5" id="rad-21"><label for="rad-21">
                        </label>
                        <input type="radio" name="star5" id="rad-22"><label for="rad-22">
                        </label>
                        <input type="radio" name="star5" id="rad-23"><label for="rad-23">
                        </label>
                        <input type="radio" name="star5" id="rad-24"><label for="rad-24">
                        </label>
                        <input type="radio" name="star5" id="rad-25"><label for="rad-25">
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
            <label for="tab-2" class="tab-label">Buzz it</label>
            <div class="tab-content"> </div>
        </div>
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
            <label for="tab-3" class="tab-label">Vibe it</label>
            <div class="tab-content"> </div>
        </div>
        <div class="tab">
            <input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
            <label for="tab-4" class="tab-label">Review it</label>
            <div class="tab-content"> </div>
        </div>
    </div>
</div>

HTML/CSS 单选按钮由于位于无线电控制的选项卡容器内而无法点击？

HTML/CSS Radio buttons not clickable due to being inside a Radio controlled tab container?

html

css

radio-button