Css add two divs with absolute position in container
I am working with bootstrap 3 and you need to add two drop shadows to the container. the first top of the container and the bottom of the container with an absolute position.
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>
I add position:absolute
for the first shadow and it worked. But the next shadow is not displayed in the container. how to fix this problem ??
DEMO: FIDDLE
+3
source to share
3 answers
make the container relative and set the bottom to negative
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;
}
+2
source to share
You can control the position of the shadow in the parent block with css properties: top, right, bottom, left; In your case, for the bottom block, set the bottom one: 0;
And remember, if you use position: absolute, set position: relative to the parent block;
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;
}
+1
source to share