0

I have problems with placing a div with absolute position inside the panel-body because it is positioned outside.

I am using a slide, the only way that works is to be absolute but it must go inside the panel. How can I make it absolute but not visually get out of the panel?

<!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>
Raul Escalona
  • 117
  • 1
  • 10

1 Answers1

1
.panel-body {
position: relative;
}

.slide { 
position: absolute; 
}
Fraze
  • 908
  • 2
  • 8
  • 20