css - 当没有空间时，将单选按钮放在 div 上

Question

我希望这些单选框悬停在 div topchoice 和 bottomchoice 上。我将更改 div“choicefirSTLeft”和“choicesecondleft”的宽度，宽度实际上可能会达到 100%。正如您在 jsfiddle 的示例中看到的那样，一旦宽度接近 100%，单选按钮就会向下移动...

我怎样才能使这些按钮位于彩色 div 之上？我不知道。

HTML:

<div id="results">
    <div id="topchoice">
        <div class="result">
            <?php echo $topresult; ?>
        </div>
        <div id="choicefirstleft">
            <label for="yes">Ja</label>
        </div>
        <input type="radio" id="yes" value="1" name="votingvalue"></input>
    </div>
    <div id="bottomchoice">
        <div class="result">
            <?php echo $bottomresult; ?>
        </div>
        <div id="choicesecondleft">
            <label for="no">Nein</label>
        </div>
        <input type="radio" id="no" value="2" name="votingvalue"></input>
    </div>
</div>

CSS:

 #topchoice{
        margin-top: 40px;
        overflow:hidden;
        background-color: #000;
        opacity: 0.9;
    }

    #bottomchoice{
        margin-top: 5px;
        overflow:hidden;
        background-color: #000;
        opacity: 0.9;
    }
    #choicefirstleft{
        width:30%;
        background-color:greenyellow;
        float:left;
        z-index: 1;
    }
    #choicesecondleft{
        width:99%;
        float: left;
        background-color: red;
        z-index: 1;
    }

    #results{
         font-size: x-large;
        width: 50%;
        margin:0 auto;   
        color: white;
        overflow:hidden;
    }

    #results input{
        float:right;


        z-index: 4;
    }

http://jsfiddle.net/K3Qgf/

Answer 1

容器是我做的

position: relative; 

然后

position: absolute;

在单选按钮上(有一个新类)

http://jsfiddle.net/K3Qgf/1/