CODEWITHSUNDEEP
css
Brian
Brian

Reputation: 35

Position Element in front of another object Using CSS

I'm new in CSS and this time I want to position my object in front of slider, So I read about that and I know Slider should have position: relative and my other object with position: absolute

Desire result:

enter image description here

So I do it, but it does not work, also the object is not responsive, how can I fix that? I prepare an example of how it works.

#main-slider {
    width: 100%;
    height: 528px;
    /* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
    border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 50% 25%;
    position: relative;
}

.badge {
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 15px 35px 0 rgba(42,51,83,.12), 0 5px 15px rgba(0,0,0,.06);
    width: 17%;
    position: absolute;
  }
  
  .text {
    padding: 0.5rem 0.25rem 0.5rem 1rem;
  }
  
  .link {
    border-radius: inherit;
   display: inline-block;
   background-color: red;
   padding: 0.5rem 1rem;
    color: #F9F9EC;
    width: 57%;
  }
 <section>
                <div>
                <img id="main-slider"  src="https://via.placeholder.com/1365x528?text=Slider">
                    <div class="badge">
                        <span class="text">Contact us</span>
                        <a class="link">
                          (555) <strong>123 4567</strong>
                        </a>
                </div>
            </div>
            </section>

Regards

Upvotes: 1

Views: 620

Answers (1)

Always Helping
Always Helping

Reputation: 14570

You can do this adding a class called .wrapper to this and using display: flex and justify content center. Also need a margin top: 0.5em to your .badge

Read more about flex boxes here

Run snippet below.

#main-slider {
  width: 100%;
  height: 528px;
  /* border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%; */
  border-bottom-right-radius: 50% 25%;
  border-bottom-left-radius: 50% 25%;
  position: relative;
}

.badge {
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 15px 35px 0 rgba(42, 51, 83, .12), 0 5px 15px rgba(0, 0, 0, .06);
  position: absolute;
  margin-top: 0.5em;
}

.text {}

.link {
  border-radius: inherit;
  display: inline-block;
  background-color: red;
  padding: 0.5rem 1rem;
  color: #F9F9EC;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
<section>
  <div class="wrapper">
    <img id="main-slider" src="https://via.placeholder.com/1365x528?text=Slider">
    <div class="badge">
      <span class="text">Contact us</span>
      <a class="link">(555) <strong>123 4567</strong></a>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions