Position Absolute в Bootstrap?

Question

Здесь на макете я вывел блок upline поверх parentline и прижал к верху через стиль css. Существует для этого встроенный метод в Bootstrap 4? Я не нашел к мурзилке.

.upline {
    z-index: 1100;
    position: absolute;
    background-color: green;
  width: 300px;
  height: 100px
}
.parentline {
    background-color: blue;
  width: 300px;
    height: 200px
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
          <div class="row dual">
                 <div class="col"></div>
                 <div class="col parentline">
                        <div class="row upline"></div>
                 </div>
          </div>
    </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js"></script>
</body>

Answer 1

Попробуйте указывать position-fixed

.upline {
    background-color: green;
    width: 300px;
    height: 100px
}
.parentline {
    background-color: blue;
    width: 300px;
    height: 200px
}
body {
    height: 2000px
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
          <div class="row dual">
                 <div class="col"></div>
                 <div class="col parentline">
                        <div class="row upline position-fixed"></div>
                 </div>
          </div>
    </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js"></script>
</body>

БЛОГ НА HUSL

Position Absolute в Bootstrap?

Ответы (1 шт):