避免显示时绝对位置隐藏的元素重叠元素

Posted 2023-02-26

我正在寻找有关绝对位置元素的CSS规则。

这是我的情况：

我有6张图片，每张图片必须在点击时显示一个隐藏的div。

我的问题如下：

1-如何使隐藏的div处于绝对位置，将下面的元素推入而不是使其重叠？

2-如何使隐藏的div上方的箭头始终居于上图的中心？

$('.img').on('click', function() 

    $('.reveal').removeClass('slideDown');
    $(this).next().addClass('slideDown');
)
$('.close').on('click', function() 
    $(this).closest('.reveal').removeClass('slideDown');
)

.flex-container 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 1em;


@media (min-width: 540px) 
    .flex-container 
        max-width: 540px;
    


@media (min-width: 768px) 
    .flex-container 
        max-width: 768px;
    


@media (min-width: 992px) 
    .flex-container 
        max-width: 992px;
    


@media (min-width: 1200px) 
    .flex-container 
        max-width: 1200px;
    


.flex-row 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1em;


.flex-col-xs-4,
.flex-col-sm-4,
.flex-col-md-4,
.flex-col-lg-4 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em;
    width: 100%;


@media (min-width: 540px) 
    .flex-col-xs-4 
        max-width: calc(100% * (4 / 12));
        width: calc(100% * (4 / 12));
    


@media (min-width: 768px) 
    .flex-col-sm-4 
        max-width: calc(100% * (4 / 12));
        width: calc(100% * (4 / 12));
    


@media (min-width: 992px) 
    .flex-col-md-4 
        max-width: calc(100% * (4 / 12));
        width: calc(100% * (4 / 12));
    


@media (min-width: 1200px) 
    .flex-col-lg-4 
        max-width: calc(100% * (4 / 12));
        width: calc(100% * (4 / 12));
    


.video-container 
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;


.video-container iframe 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


.video-wrapper 

.close 
    color: #ffffff!important;
    float: right;
    font-size: 35px;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    top: 30px;
    right: 30px;


.close:hover,
.close:focus 
    color: #000;
    text-decoration: none;
    cursor: pointer;


img 
    border: 0;
    max-width: 300px;


.reveal-container 
    position: relative;


.reveal-video-wrapper 
    max-width: 540px;
    width: 100%;


.reveal 
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background: #ddd;
    top: auto;
    left: 0;
    width: 100%;
    margin-top: 20px;
    text-align: left;
    max-height: 0;
    overflow: hidden;
    padding: 100px;


.reveal::before 
    top: 6px;
    width: 0;
    height: 0;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-bottom: 20px solid #ddd;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 15px;
    left: 25%;
    margin: -20px 0 0 -15px;


.reveal.slideDown 
    visibility: visible;
    opacity: 1;
    max-height: 677px;
    overflow: visible;


.reveal-content 
    display: flex;
    justify-content: flex-start;
    align-items: center;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
    <div class="flex-container">
        <div class="flex-row">

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/DrBy7MyiqJU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/YkkezwcBZLQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/fR2q_Xe7kqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/iaAgm4lO3tw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/fR2q_Xe7kqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

</article>

答案

如评论中所讨论，保持绝对定位的叠加层的快速解决方案是影响所选项目行的高度。

您的html和CSS有点破损和过于复杂。我用边距动画制作了一个简化的示例来解决您的问题。您当然可以使用延迟来调整动画，以使过渡更加平滑。

function close() 
    $('.row').removeClass('is-expanded')
        .find('li[aria-expanded="true"]').attr('aria-expanded', false);


$('input[type="image"]').on('click', function() 

    close();
    $(this).parent().attr('aria-expanded', true)
        .parents('.row').addClass('is-expanded');
);

$('.close').on('click', close);

ul 
    list-style: none;
    padding: 0;
    margin: 0;


.row 
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;


.row li 
    width: 23%;
    margin-bottom: 10px;
    transition: margin .5s ease-in;



input 
    display: block;
    width: 100%;


article 
    position: absolute;
    overflow: hidden;
    height: 0;
    left: 0;
    bottom: 20px;
    transition: height .5s ease-in;
    background: grey;
    display: flex;
    align-items: center;


article > button 
    background: transparent;
    position: absolute;
    top: 20px;
    right: 20px;
    outline: 0;


article iframe 
    float: left;
    margin: 20px;


li[aria-expanded="true"] 
    margin-bottom: 180px;


li[aria-expanded="true"] article 
   height: 140px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>
        <ul class="row">
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum A</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum B</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum C</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum D</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
        </ul>
    </li>
    <li>
        <ul class="row">
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum E</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum F</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="clo
以上是关于避免显示时绝对位置隐藏的元素重叠元素的主要内容，如果未能解决你的问题，请参考以下文章
 
 避免在谷歌地图叠加层中重叠
 在relativelayout中布局，两个控件重叠，放在后面得viewpager点击滑动事件都无效了
 定位多个、随机大小、绝对定位的元素，使它们不重叠
 重叠 DIV 元素和 onclick
 CSS外边距margin上下元素重叠
 在失焦时隐藏文本选择句柄：Android -Webview