主页 / 问题 / 1236266
Accepted
GreenX5
Asked:2022-01-26 21:21:45 +0800 CST2022-01-26 21:21:45 +0800 CST

Bootstrap中的绝对位置？

  • 772

在布局上，我将 upline 块放在 parentline 的顶部，并通过 css 样式将其压到顶部。Bootstrap 4中是否有内置方法？我没有找到Murzilka。

.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/bootstrap@4.6.0/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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script>
</body>

javascript

1 个回答

  1. Best Answer

    尝试指定位置固定

    .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/bootstrap@4.6.0/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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script>
</body>

    • 1

相关问题