Create a container and add two div elements with absolute positioning inside

Utilizing bootstrap 3, I am looking to incorporate two shadows within a container. The first shadow will be positioned at the top of the container, followed by the second shadow at the bottom using absolute positioning.

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 have applied position: absolute for the first shadow and it displays correctly. However, the second shadow is not visible in the container. How can I resolve this issue?

DEMO:

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>

jqueryhtmlcsstwitter-bootstrap

Answer №1

CLICK HERE FOR THE LIVE DEMO

To achieve the desired effect, ensure the container is set to a relative position and adjust the bottom property to a negative value.

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

To adjust the positioning of the shadow on the parent block, utilize CSS properties such as top, right, bottom, and left. For instance, if you want to position the shadow at the bottom of the block, specify bottom: 0;

Also, it's crucial to note that when using position: absolute, the parent block should have position: relative specified.

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

Change margin-bottom to bottom:0

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for designing a tabbed interface using HTML

I am attempting to design a tabbed interface in HTML on my Google Sites page. I want it to behave similarly to this example: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h However, when I insert the code into an HT ...

htmlgoogle-sites

How do I iterate through two arrays in jQuery/JS and switch a class using an if/else statement?

Currently, I am iterating over two arrays: selectedLabelsTemp which appears as [1,8], and the rosterLabelList...$(this).data looks like [1,8,2,12]. My objective is to ensure that when it enters the if-else statement, $(this) will receive the class check-ac ...

jqueryarrays

Only one bootstrap collapse is visible at a time

Currently, I am using Bootstrap's collapse feature that displays content when clicking on a specific button. However, the issue I am facing is that multiple collapses can be open at the same time. I want to ensure that only one collapse is visible whi ...

javascriptjquerytwitter-bootstrap

AngularJS issue: function firing twice when selecting an option from dropdown using ng-change

I'm fairly new to angularjs and I'm encountering a confusing issue. I've created an angularjs controller that populates data in a dropdown menu, and upon selecting each option, it should display a particular location on a map triggered by ng ...

javascriptjqueryhtmlangularjsjson

How do I customize the border color for the Select component in Material UI?

I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...

cssreactjsmaterial-ui

Creating a repeated design using linear gradients in CSS

As I venture into the realm of Photoshop patterns for the first time, I am working on a webpage where I plan to incorporate these patterns to enhance the background. The pattern I have discovered measures 120x120 px. If I were to stop here, I would simpl ...

htmlcssrepeat

What could be the reason for the specified element not receiving the CSS class as intended?

I am currently in the process of updating a website at . One of the main changes I am making is to move the "English" button to the top right corner of the page. Below is the HTML code for the button: <a href="http://hairtothequeenbook.com" class="lan ...

htmlcss

What is the best approach to dynamically bind a style property in Vue.js 3?

I am currently working with vue3 and I am trying to apply dynamic styles. This is how my vue3 template looks: <ul> <li v-for="(question, q_index) in questions" :key="q_index" v-show="question.visible" :style="{ ...

cssvue.jstemplatesvuejs3

What is the best way to invoke a JavaScript function that utilizes the jQuery library?

Recently I came across this interesting function: function squarifyMe(element) { squareItUp() window.onresize = function(element) { squareItUp(); } function squareItUp() { $(element).height($(element).width()); } } and its usage is as ...

javascriptjquery

looking to change the background color of a CSS element

Here is a CSS code snippet that I am struggling with: .select, .input, .schedule, .editableFields { cursor: pointer; background-color: blue; } However, the above code overrides this one: #past .layer.color { background-color: #E5D403 !import ...

jqueryhtmlcsstwitter-bootstrapbackground-color

jQuery ajax functions only function properly in Internet Explorer

Having an issue with my multilingual MVC 3 application. I am using a dropdownlist to switch languages by saving the value into a cookie and session. The problem is that it only works in IE. When I reload the site or close Firefox or Chrome, the language ch ...

jqueryajaxasp.net-mvc-3cookies

Leveraging the parent container's scope

Can someone please explain the concept of "using parent divs scope" in the following code where on button click, the parent div's input text is alerted? HTML <div class="info"> <input type="text" placeholder="Email" class="email" value="[e ...

jqueryscope

Displaying nested object properties in HTML through iteration

What is the correct way to access them if item.NestObj.textpropertyVal is showing incorrect? success: function(data){ var html = ""; $.each(data.mainOutterObj, function (index, item) { html += "<ul&g ...

javascriptjqueryjson

jquery hover effect not functioning properly

I have a question regarding my jquery mobile application. I am trying to implement a hover effect on items with the class grid-item, where the width and height change simultaneously in an animation. Here is the code snippet I am using: $('.grid-i ...

javascriptjqueryhtmlcsshover

What is the best way to conceal text that overflows from a div and seamlessly return to the beginning once the end of the text has been reached?

I am struggling to figure out how to hide the overflow text that is spilling out of the div. I attempted using overflow: hidden;, but unfortunately, it didn't work as expected. Additionally, I would like the text to loop back to the beginning once it ...

javascripthtmlcssanimationslide

Tips for styling rounded buttons in Svelte Material UI

I am in need of creating a circular button using sveltemateriaui. After checking the examples at , I couldn't find a similar one. However, my attempt to create it using plain CSS resulted in an elliptical shape as shown here: . The only workaround I ...

cssmaterial-uisvelte

Storing dropdown selection as a variable in a PHP Ajax form

I have created a PHP form that allows the user to select an option from a dropdown menu in order to view a specific data set. The data is refreshed on the screen using an AJAX call and I am utilizing the 'html' datatype to update the output withi ...

phphtmlajax

View an image in advance of uploading it and concealing any broken images

The foundational code for previewing an image before it is uploaded can be found at this link. Here are the codes: <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var ...

javascriptjqueryfile-upload

Elevate your website design with Bootstrap by placing a fixed horizontal navigation bar above all

I am facing an issue with my vertical Bootstrap sidemenu that transitions to horizontal layout responsively. When the sidemenu switches to a horizontal display, it ends up being hidden behind other elements, particularly on smaller devices. The example de ...

htmlcssbootstrap-4

Utilizing a button's "data-" attribute to trigger a specific JavaScript function

I am trying to assign data to my buttons in a way that makes it accessible when clicked. While I can easily use JSON in a button's data attribute with a string as the key value, I am struggling to set the values to be a function instead. What I want ...

javascriptjqueryhtmljsoncustom-data-attribute