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，这是正常的但是下一个阴影不会显示在容器中。如何解决这个问题！？

DEMO：FIDDLE

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属性控制阴影到父块的位置：top，right，bottom，left; 在您的情况下，底部块设置底部：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;
 }

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

3 个答案: