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

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

CSS:

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>

欢迎来到
前庭，威尼斯三色体（venenatis tristique nisi sit amet）和奥雷姆（Vallpat accumsan lorem）。塞德·奎斯·麦格纳。梅塞纳斯·亨德雷特·福吉亚·普尔维纳尔。埃涅亚调味品是一种尤物。无便利。在hac habitasse Plateum，一句名言。Ut nec
泰勒斯·内克。无酒后驾车者，应使用设备

设置

底部：0

而不是

页边距底部

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

---

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

请记住，如果使用“位置：绝对”，请为父块设置“位置：相对”

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;
}

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

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;
}

---

我认为设置

位置：相对到底部阴影将起作用。@班扎伊：当然，但需要
位置：绝对值
来显示阴影分区的内容。这不起作用。”。如果设置为
bottom:0
页面底部阴影显示（外部容器）
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;
}