时间戳

首页 > 解决方案 > 在 Panel-body 内具有绝对位置的 Div

html - 在 Panel-body 内具有绝对位置的 Div

问题描述

我在面板主体内放置具有绝对位置的 div 时遇到问题，因为它位于外部。

我正在使用幻灯片，唯一可行的方法是绝对的，但它必须进入面板内部。我怎样才能让它绝对而不是从视觉上脱离面板？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


    <style type="text/css">
        body { font-size: 15px; text-align: center;}


        .slide{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            z-index: 1;
        }
    </style>
</head>
<body> 

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="col-md-12 slide">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </div>

            <div class="panel-footer">
                <button type="button" class="btn btn-info">Button</button>
            </div>

        </div>
    </div>

</body>
</html>

标签： htmlcssbootstrap-4

解决方案

.panel-body {
position: relative;
}

.slide { 
position: absolute; 
}

推荐阅读