css在容器中添加两个具有绝对位置的div

Question

我使用 bootstrap 3，需要在容器中添加两个阴影。具有绝对位置的容器的第一个顶部和容器的下一个底部。

CSS：

.section-st1 {
    padding: 0px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}
.section-st1 .shadowtop {
    position: absolute;
    margin-top:-1px;
    background-color:#e1e1e1;
}
.section-st1 .shadowbot {
    margin-bottom:0;
    position:absolute;
    background-color:#e1e1e1;
}

HTML：

<section class="section section-st1 section-align-center">
    <div class="container">
        <div class="shadowtop">
            <img alt="shadow1" src="img/shadow-top.png"></img>
        </div>
        <div class="row">
            <div class="col-lg-12">
                 <h2>welcome to</h2>

                <p>Vestibulum nunc erat, venenatis tristique nisi sit amet, volutpat accumsan lorem. Sed quis tortor magna. Maecenas hendrerit feugiat pulvinar. Aenean condimentum quam eu ultricies cursus. Nulla facilisi. In hac habitasse platea dictumst. Ut nec tellus neque. Sed non dui eget arcu elementum facilisis.</p>
            </div>
        </div>
        <div class="shadowbot">
            <img alt="shadow2" src="img/shadow-bot.png"></img>
        </div>
    </div>
</section>

我为第一个阴影添加了position: absolute，这确实有效但是下一个阴影没有显示在容器中。如何解决这个问题？

演示：

body {
  margin-top: 10px;
}

.section-st1 {
  padding: 0px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.section-st1 .shadowtop {
  position: absolute;
  margin-top: -1px;
  background-color: #e1e1e1;
}

.section-st1 .shadowbot {
  margin-bottom: 0;
  position: absolute;
  background-color: #e1e1e1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<section class="section section-st1 section-align-center">
  <div class="container">
    <div class="shadowtop">
      <img alt="shadow1" src="https://loremflickr.com/500/3?random=1" />
    </div>
    <div class="row">
      <div class="col-lg-12">
        <h2>welcome to</h2>
        <p>Vestibulum nunc erat, venenatis tristique nisi sit amet, volutpat accumsan lorem. Sed quis tortor magna. Maecenas hendrerit feugiat pulvinar. Aenean condimentum quam eu ultricies cursus. Nulla facilisi. In hac habitasse platea dictumst. Ut nec
          tellus neque. Sed non dui eget arcu elementum facilisis.</p>
      </div>
    </div>
    <div class="shadowbot">
      <img alt="shadow2" src="https://loremflickr.com/500/3?random=2" />
    </div>
  </div>
</section>

Answer 1

DEMO

使容器相对并设置底部为负数

body {
    margin-top:10px;
}
.container{ position:relative;}
.section-st1 {
    padding: 0px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
}
.section-st1 .shadowtop {
    position: absolute;
    margin-top:-1px;
    background-color:#e1e1e1;
}
.section-st1 .shadowbot {
    bottom:-3px;
    position:absolute;
    background-color:#e1e1e1;
}

Answer 2

您可以使用 css 属性控制阴影到父块的位置：上、右、下、左； 在你的情况下，对于底部块设置底部：0;

记住如果你使用 position:absolute，设置 position:relative 为父块；

body{margin-top:10px;}
.section-st1 {
    padding: 0px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    position: relative;
}
.section-st1 .shadowtop {
    position: absolute;
    margin-top:-1px;
    background-color:#e1e1e1;
}
.section-st1 .shadowbot {
    margin-bottom:0;
    position:absolute;
    background-color:#e1e1e1;
    bottom: 0px;
}

Answer 3

设置bottom:0 而不是margin-bottom

.section-st1 .shadowbot 
 {
  bottom:0;
  position:absolute;
  background-color:#e1e1e1;
 }