绝对定位部分弄乱了网页的其余部分答案

【问题标题】：absolutely positioned section is messing with the rest of web page绝对定位部分弄乱了网页的其余部分
【发布时间】：2015-11-13 05:24:03
【问题描述】：

我正在设计一个幻灯片和绝对定位的 ul 图像。绝对定位的 ul 与页面其余部分的自然流动相矛盾。我知道绝对定位的元素可以做到这一点。但是，我的印象是将 #sliding 部分设置为 position: static 并具有 height: auto !important 会起作用。 #stuff 部分显示在#sliding 部分下方。以前有没有其他人需要处理这个问题？

为了完全清楚实际的幻灯片效果很好，但 HTML 和 CSS 是我想要解决的问题。非常感谢任何帮助。

这里是 HTML

    <section id="sliding">

        <img id="leftimg" src="prev.png" alt="left">

        <ul class="boxslider">
            <li><img class="slidingimg" src=".jpg" id="will" alt="1"></li><!-- will -->
            <li><img class="slidingimg" src=".jpg" id="poa" alt="2"></li><!-- powerofattorney -->
            <li><img class="slidingimg" src=".jpg" id="probate" alt="3"></li><!-- probate -->
            <li><img class="slidingimg" src=".jpg" id="forming" alt="4"></li><!-- forming business -->
            <li><img class="slidingimg" src=".jpg" id="contracts" alt="5"></li><!--  -->
            <li><img class="slidingimg" src=".jpg" id="realestate" alt="6"></li><!--  -->
        </ul>

        <img id="rightimg" src="next.png" alt="right">
    </section>

    <section id="stuff">
        <h2>Stuff</h2>
        <h2>Stuff</h2>
        <h2>Stuff</h2>
        <h2>Stuff</h2>
    </section>

这里是 CSS

#sliding{
    position: static;
    display: block;
    width: 100vw;
    height: auto !important;
    clear: both;
}

#leftimg, #rightimg{
    display: inline-block;
    position: absolute;
    top: 40%;
    width: 50px;
    z-index: 1;
}

#leftimg{
    left: 1vw;
}

#rightimg{
    right: 1vw;
}

.boxslider{
    position: absolute;
    left: 0px;
    display: block;
    width: 600vw;
    overflow: none;
}

.slidingimg{
    display: inline-block;
    vertical-align: top;
    width: 100vw;
    height: auto;
    float: left;
}

#stuff{
    width: 100vw;
    height: 80vh;
    border-top: 8px solid green;
    clear: both;
}

这里是 jsfiddle。

http://jsfiddle.net/2ruk3Lju/2/

【问题讨论】：

在这里发布代码。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误和必要的最短代码 在问题本身中重现它。没有明确的问题陈述的问题对其他读者没有用处。见：How to create a Minimal, Complete, and Verifiable example.
添加了代码并进一步澄清了问题。

标签： height css-position absolute sections

【解决方案1】：

我猜你不能使用 position:absolute。绝对位置必须明确指定高度和宽度。我决定尝试相对位置，因为它仍然可以通过 jquery 移动以创建滑动效果。之所以可行，是因为 position:relative 仍在文档的正常流程中，并解决了 #sliding div 下方的内容堆叠在其下方的问题。

【讨论】：