Question

我想知道如何让标题元素在滑块下方而不是在滑块顶部和后面流动。换句话说，如何让标题或任何其他元素在滑块下方正常流动。

以下是Jsfiddle https://jsfiddle.net/1kg7s473/

的链接

HTML

<form class="sliders">
    <input type="radio" name="slider-choice" id="first-slider" checked />
    <div class="slider-container">
        <div class="slider">
            <p>Some Random Text...</p>
        </div>
        <div class="nav">
            <label for="second-slider" class="prev"></label>
            <label for="second-slider" class="next"></label>
        </div>
    </div>

    <input type="radio" name="slider-choice" id="second-slider" />
    <div class="slider-container">
        <div class="slider">
            <p>Even Some More Random Text...</p>
        </div>
        <div class="nav">
            <label for="first-slider" class="prev"></label>
            <label for="first-slider" class="next"></label>
        </div>
    </div>
</form>

<h2>Some more random text</h2>

CSS

.sliders {
    width: 600px;
    position: relative;
}

.sliders input{ 
    display: none; 
}

.slider {
    position: absolute;
    opacity: 0;
    width: 600px;
    transform: scale(0);
    transition: all .6s ease-in-out;
}

.nav label {
    margin-top: 65px;
    width: 85px;
    display: none;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    transition: opacity .2s;
    color: black;
    font-size: 6em;
    text-align: center;
    background-color: rgba(100, 100, 100, .6);
    Z-index: 99999;
}

.sliders:hover .nav label{
    opacity: 0.5;
    cursor: pointer;
}

.sliders:hover .prev:hover, .sliders:hover .next:hover{
    opacity: 1;
}

.nav .next{ 
    right: 0;
}

.prev:before{
    content: '\2770';
}

.next:before{
    content: '\2771';
}

input:checked + .slider-container .slider{
    opacity: 1;
    transform: scale(1);
    transition: opacity 2s ease-in-out;
}

input:checked + .slider-container .nav label{ 
    display: block; 
}

p{
    padding: 100px 20px;
    width: 560px;
    text-align: center;
    background: #dae1ef;
}

Answer 1

将h2放在div内，如下所示：

<div class="h2Container" >
 <h2>Some more random text</h2>
</div>

将以下CSS添加到班级h2Container

.h2Container
{
position: relative; padding-top: 25%;    
}

以下是Demo。

Answer 2

删除.slider类上的样式，并将它们归因于幻灯片容器，而不是使用这些更改：

.slider-container {
   width: 600px;
   position: relative; //do not use absolute on this
   top: 0;
   height: 235px; //you must have a height defined or 100%
   display: inline-block; //this reserves the entire area (width X Height) and automatically places the next element below the defined height 
}

查看工作DEMO

CSS元素定位麻烦

2 个答案: