Question

由于将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>

Answer 1

.panel-body {
position: relative;
}

.slide { 
position: absolute; 
}

绝对位于面板主体内的Div

1 个答案: