CODEWITHSUNDEEP
htmlcss
Ludar0
Ludar0

Reputation: 85

How to hide under div a div with position absolute

I have two div that shows "today special" dish centered using flexbox. I want to add one more picture under the second special dish. I think it should be positioned absolute becouse than I can push it from the top of the section. Also I have tried to use z-index, I want to position placeholder under second dish? Im using sass if it changes something.

Here is the code:

.specials {
  background-image: url(../images/special-section-background.png);
  min-height: 440px;
  position: relative;
}

.specials .wrapper {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 890px;
  padding-top: 30px;
}

.specials .wrapper .heading {
  font-family: "Playfair Display";
  color: #fff;
  font-size: 35px;
  font-weight: 700;
}

.specials .wrapper .images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.specials .wrapper .images h2 {
  font-family: "Playfair Display";
  font-weight: 700;
  font-size: 26px;
}

.specials .wrapper .images p {
  font-family: "Sintony";
  font-size: 14px;
}

.specials .wrapper .images .contact {
  padding: 20px 0;
}

.specials .wrapper .images .contact h3,
.specials .wrapper .images .contact h4 {
  display: inline;
  padding: 0 20px;
}

.specials .wrapper .images .contact span {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 13px;
  display: inline-block;
  text-align: start;
}

.specials .wrapper .images .contact span:after {
  content: '';
  height: 100%;
  width: 1px;
  border-right: 1px solid #e1e1e1;
  padding-right: 10px;
  padding-top: 10px;
}

.specials .wrapper .images .contact span a {
  color: #fe7cab;
}

.specials .wrapper .images .contact h3 {
  font-family: "Playfair Display";
  font-weight: 700;
  font-size: 26px;
}

.specials .wrapper .images .contact h4 {
  font-family: "Playfair Display";
  font-weight: 700;
  font-size: 30px;
  color: #fea100;
}

.specials .wrapper .images .first-dish {
  -ms-grid-column-align: end;
      justify-self: end;
  margin-right: 10px;
  max-width: 570px;
  -webkit-box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
          box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
}

.specials .wrapper .images .first-dish .description {
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: 30px;
  border-bottom: 1px solid #e1e1e1;
}

.specials .wrapper .images .second-dish {
  max-width: 570px;
  -webkit-box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
          box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
  z-index: 1;
}

.specials .wrapper .images .second-dish .description {
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: 30px;
  border-bottom: 1px solid #e1e1e1;
  z-index: 1;
}

.specials .last-offert {
  position: absolute;
  z-index: -1;
  top: 78%;
  right: 13%;
}
<div class="specials">
        <div class="wrapper">
            <div class="heading">
                <h2 class="">Today Special</h2>
            </div>
            <div class="images">
                <div class="first-dish">
                    <img src="images/today-special-img.png" alt="">
                    <div class="description">
                        <h2>Food Name One</h2>
                        <p>printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                    </div>
                    <div class="contact">
                        <span>Home <br><a>Delivery</a></span>
                        <h3>1-088 005 006</h3>
                        <h4>89.00$</h4>
                    </div>
                </div>
                <div class="second-dish">
                    <img src="images/today-special-img.png" alt="">
                    <div class="description">
                        <h2>Food Name One</h2>
                        <p>printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                    </div>
                    <div class="contact">
                        <span>Home <br><a>Delivery</a></span>
                        <h3>1-088 005 006</h3>
                        <h4>99.00$</h4>
                    </div>
                </div>
                <div class="last-offert">
                    <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 49

Answers (1)

nvioli
nvioli

Reputation: 4209

I made two changes:

  • added position:relative to .images to give position context to .last-offert
  • added background:white to .second-dish. Previously it was correctly stacking above the placeholder image, but you couldn't tell because the background was transparent.

I'm not sure I've totally understood your needs, so let me know if I've missed something.

.specials {
  background-image: url(../images/special-section-background.png);
  min-height: 440px;
  position: relative;
}

.specials .wrapper {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 890px;
  padding-top: 30px;
}

.specials .wrapper .heading {
  font-family: "Playfair Display";
  color: #fff;
  font-size: 35px;
  font-weight: 700;
}

.specials .wrapper .images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position:relative;
}

.specials .wrapper .images h2 {
  font-family: "Playfair Display";
  font-weight: 700;
  font-size: 26px;
}

.specials .wrapper .images p {
  font-family: "Sintony";
  font-size: 14px;
}

.specials .wrapper .images .contact {
  padding: 20px 0;
}

.specials .wrapper .images .contact h3,
.specials .wrapper .images .contact h4 {
  display: inline;
  padding: 0 20px;
}

.specials .wrapper .images .contact span {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 13px;
  display: inline-block;
  text-align: start;
}

.specials .wrapper .images .contact span:after {
  content: '';
  height: 100%;
  width: 1px;
  border-right: 1px solid #e1e1e1;
  padding-right: 10px;
  padding-top: 10px;
}

.specials .wrapper .images .contact span a {
  color: #fe7cab;
}

.specials .wrapper .images .contact h3 {
  font-family: "Playfair Display";
  font-weight: 700;
  font-size: 26px;
}

.specials .wrapper .images .contact h4 {
  font-family: "Playfair Display";
  font-weight: 700;
  font-size: 30px;
  color: #fea100;
}

.specials .wrapper .images .first-dish {
  -ms-grid-column-align: end;
      justify-self: end;
  margin-right: 10px;
  max-width: 570px;
  -webkit-box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
          box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
}

.specials .wrapper .images .first-dish .description {
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: 30px;
  border-bottom: 1px solid #e1e1e1;
}

.specials .wrapper .images .second-dish {
  max-width: 570px;
  -webkit-box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
          box-shadow: 2px 13px 28px -9px rgba(0, 0, 0, 0.48);
  z-index: 1;
  background:white;
}

.specials .wrapper .images .second-dish .description {
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: 30px;
  border-bottom: 1px solid #e1e1e1;
  z-index: 1;
}

.specials .last-offert {
  position: absolute;
  z-index: -1;
  top: 78%;
  right: 13%;
}
<div class="specials">
        <div class="wrapper">
            <div class="heading">
                <h2 class="">Today Special</h2>
            </div>
            <div class="images">
                <div class="first-dish">
                    <img src="images/today-special-img.png" alt="">
                    <div class="description">
                        <h2>Food Name One</h2>
                        <p>printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                    </div>
                    <div class="contact">
                        <span>Home <br><a>Delivery</a></span>
                        <h3>1-088 005 006</h3>
                        <h4>89.00$</h4>
                    </div>
                </div>
                <div class="second-dish">
                    <img src="images/today-special-img.png" alt="">
                    <div class="description">
                        <h2>Food Name One</h2>
                        <p>printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                    </div>
                    <div class="contact">
                        <span>Home <br><a>Delivery</a></span>
                        <h3>1-088 005 006</h3>
                        <h4>99.00$</h4>
                    </div>
                </div>
                <div class="last-offert">
                    <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Related Questions