Using CSS Position Absolute, Relative and Z-Index for 2 Images Which Are Responsive (Not Fixed) in Size

how to position the image on top of each other using 'position: absolute' without it overlays other section? HTML CSS

Set max-width: 100%; on your img so it can resize accordingly.

You can also try mt-4 which stands for margin-top: 1.5rem for additional spacing on the new section.

.container-home-about {
  padding-top: 65px;
  padding-bottom: 65px;
}

.row {
  height: 100%;
}

.about-content>p {
  font-size: 16px;
  font-weight: 400;
  color: #5d77aa;
}

.about-image {
  position: relative;
}

.img-bottom {
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
}

.img-top {
  position: absolute;
  z-index: 1;
  top: 80px;
  left: 75px;
}

img {
  max-width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <div class="home home-about">
    <div class="container container-home-about">
      <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-6 left">
          <div class="about-content">
            <p style="max-width: 520px;">
              Lorem Ipsum is simply dummy text of the 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 it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
              desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
          </div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 right">
          <div class="about-image">
            <img src="https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="Sample Image" class="img-bottom">
            <img src="https://images.unsplash.com/photo-1500630417200-63156e226754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Sample Image" class="img-top">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="home home-partner mt-4" style="border-top: 1px solid #EAEAEA;">
    <div class="container container-home-partner">
      <div class="col-xl-3 col-lg-4 col-md-4 partner-title">
        <div class="title" style="z-index: 9;">World class brand</div>
        <div class="subtitle" style="z-index: 9;">Our Partners</div>
      </div>
    </div>
  </div>
</body>

Z-index does not work properly even when setting position elements and z-index?

Please see the CSS changes I made at the bottom under /* additions */. For the #features section, it has a white background by default, and you actually have to declare background-color: white; so that CSS knows to put the white background front of section#title

body {
  font-family: "Montserrat";
}

#title {
  background-color: #000b49;
  color: white;
}

h1 {
  font-family: "Montserrat";
  font-size: 3.5rem;
  line-height: 1.5;
  font-weight: 900;
}

h2 {
  font-family: "Montserrat";
  font-size: 2.5rem;
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
}

.container-fluid {
  padding: 3% 15%;
}

/* Navigation_bar */

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

.navbar {
  padding: 0 0 4.5rem;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-family: "Montserrat-Light";
  font-size: 1.2rem;
}

.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */

.iphone {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
}

.iphone-container {
  position: relative;
}

/* Features */

#features {
  padding: 10% 15%;
  position: relative;
  text-align: center;
  z-index: 1;
}

.feature-img {
  color: #35589a;
  padding-bottom: 15%;
}

.feature-img:hover {
  color: #c84b31;
}

.sub-text {
  color: #8f8f8f;
}

/* Testimonials */

#testimonials {
  text-align: center;
  background-color: #0f4d92;
  color: white;
}

.testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}

#press {
  background-color: #0f4d92;
  text-align: center;
  padding: 3%;
}

.press-logo {
  width: 15%;
  margin: 20px 20px 15px;
}

.carousel-item {
  padding: 7% 15%;
}

/* Pricing section */

#pricing {
  padding: 100px;
}

.pricing-col {
  padding: 3% 2%;
  text-align: center;
}

/* additions */

section#features {
  position: relative;
  background-color: white;
  z-index: 1;
}

section#title {
  position: relative;
  z-index: 0;
}

img.iphone {
  height: 400px;
  width: 200px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vietalk</title>

    <!-- Bootstrap  -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
      crossorigin="anonymous"
    ></script>

    <!-- CSS Style Sheets -->
    <link rel="stylesheet" href="css/styles.css" />
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,900;1,400;1,500&family=Ubuntu:ital,wght@0,400;0,700;1,300&display=swap"
      rel="stylesheet"
    />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <section id="title">
      <div class="container-fluid">
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="">tindog</a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Download</a>
              </li>
            </ul>
          </div>
        </nav>

        <!-- Title -->
        <div class="row">
          <div class="col-lg-6">
            <h1>Meet new and interesting dogs nearby.</h1>

            <button type="button" class="btn btn-dark btn-lg download-button">
              <i class="fab fa-apple"></i> Download
            </button>

            <button
              type="button"
              class="btn btn-outline-light btn-lg download-button"
            >
              <i class="fab fa-google-play"></i> Download
            </button>
          </div>

          <div class="iphone-container col-lg-6">
            <img class="iphone" src="https://raw.githubusercontent.com/BrianTruong23/tindog/main/TinDog%20Start%20Here/images/iphone6.png" alt="iphone-mockup" />
          </div>
        </div>
      </div>
    </section>

    <!-- Features -->

    <section id="features">
      <div class="container">
        <div class="row">
          <div class="col-lg-4">
            <i class="far fa-check-circle fa-4x feature-img"></i>
            <h3>Easy to use.</h3>
            <p class="sub-text">So easy to use, even your dog could do it.</p>
          </div>

          <div class="col-lg-4">
            <i class="fas fa-bullseye fa-4x feature-img"></i>
            <h3>Elite Clientele</h3>
            <p class="sub-text">We have all the dogs, the greatest dogs.</p>
          </div>

          <div class="col-lg-4">
            <i class="fas fa-heart fa-4x feature-img"></i>
            <h3>Guaranteed to work.</h3>
            <p class="sub-text">
              Find the love of your dog's life or your money back.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials -->

    <section id="testimonials">
      <div
        id="testimonials-carousel"
        class="carousel slide"
        data-ride="carousel"
      >
        <ol class="carousel-indicators">
          <li
            data-target="#carouselExampleIndicators"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>

        <div class="carousel-inner">
          <div class="carousel-item active">
            <h2>
              I no longer have to sniff other dogs for love. I've found the
              hottest Corgi on TinDog. Woof.
            </h2>
            <img
              class="testimonial-image"
              src="images/dog-img.jpg"
              alt="dog-profile"
            />
            <em>Pebbles, New York</em>
          </div>
          <div class="carousel-item">
            <h2 class="testimonial-text">
              My dog used to be so lonely, but with TinDog's help, they've found
              the love of their life. I think.
            </h2>
            <img
              class="testimonial-image"
              src="images/lady-img.jpg"
              alt="lady-profile"
            />
            <em>Beverly, Illinois</em>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#testimonials-carousel"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#testimonials-carousel"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>

    <!-- Press -->

    <section id="press">
      <img class="press-logo" src="images/techcrunch.png" alt="tc-logo" />
      <img class="press-logo" src="images/tnw.png" alt="tnw-logo" />
      <img class="press-logo" src="images/vn-logo.png" alt="biz-insider-logo" />
      <img class="press-logo" src="images/mashable.png" alt="mashable-logo" />
    </section>

    <!-- Pricing -->

    <section id="pricing">
      <h2>A Plan for Every Dog's Needs</h2>
      <p>Simple and affordable price plans for your and your dog.</p>

      <div class="row">
        <div class="pricing-col col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Chihuahua</h3>
            </div>
            <div class="card-body">
              <h2>Free</h2>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-dark btn-lg">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="pricing-col col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Labrador</h3>
            </div>
            <div class="card-body">
              <h2>$49 / mo</h2>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-dark btn-lg">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="pricing-col col-lg-4 col-md-12">
          <div class="card">
            <div class="card-header">
              <h3>Mastiff</h3>
            </div>
            <div class="card-body">
              <h2>$99 / mo</h2>
              <p>Pirority Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-outline-dark btn-lg">
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Call to Action -->

    <section id="cta">
      <h3>Find the True Love of Your Dog's Life Today.</h3>
      <button type="button">Download</button>
      <button type="button">Download</button>
    </section>

    <!-- Footer -->

    <footer id="footer">
      <p>© Copyright 2021 TinDog</p>
    </footer>
  </body>
</html>

How do I fix the z-index with an absolute nav bar and a relative image?

Add this to your nav css

  position: absolute;
  top: 0;
  z-index: 100;

The reason it was not working was because, you were making the inner li items position:absolute

Instead of doing this, make the parent nav position:absolute

nav {  text-align: right;  width: 100%;  position: absolute;  top: 0;  z-index: 100;}
nav ul li {  }
nav li {  display: inline;  width: 100%;}
li {  list-style-type: none;  width: 100%;  padding: 5px;}
#hero-image {  width: 100vw;  height: 100vh;  margin: 0;  padding: 0;  z-index: -1;  position: relative;}

<nav id="top-nav">  <ul class="nav-list">    <li class="nav-item">Home</li>    <li class="nav-item">Course Catalog</li>    <li class="nav-item">Products & Services</li>    <li class="nav-item">About</li>    <li class="nav-item">Contact</li>  </ul></nav>
<img id="hero-image" src="https://res.cloudinary.com/spacecatind/image/upload/v1568288870/The%20Line%2C%20LLC/tower-sunset_qtqa0q.jpg"></img>

Two images on each other with responsive behavior and proportional scaling

In order to achive that, you can work with percentages, so if you reduce the scale of the window the size of the images reduce as well.

CSS:

.submarine {
  width: 30%;
  height: 55%;
  position: relative;
}

.redDot {
  width: 2%;
  position: absolute;
}

HTML:

<div>
  <img src="submarine.jpg" clas="submarine">
  <img src="redDot.png" class="redDot">
</div>

Then play with the margins in orther to position the red dot in the submarine.

Using CSS Position Absolute, Relative and Z-Index for 2 Images Which Are Responsive (Not Fixed) in Size

how to position the image on top of each other using 'position: absolute' without it overlays other section? HTML CSS

Z-index does not work properly even when setting position elements and z-index?

How do I fix the z-index with an absolute nav bar and a relative image?

Two images on each other with responsive behavior and proportional scaling

Related Topics

Leave a reply