Can the absolute position cause an image to get bigger than it originally was?

Question

I am trying to get #features div to overlap part of .title-image using z-index. When I set .title-image position to absolute, the image gets bigger than what it was previously. My question is, if .title-image is contained in a div called col-lg-6with sizing dimensions already added to it, would the sizing be thrown out even though the image was contained in a div? I used another image as the .title-image so that you would see what I am experiencing. What am I doing wrong?

#title {
  background-color: #ff4c68;
  color: #fff;
}

body {
  font-family: 'Montserrat';
  font-weight: normal;
}

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

h2 {
  font-family: 'Montserrat';
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.5;
}

h3 {
  font-family: 'Montserrat';
  font-weight: bold;
}

p {
  color: #8f8f8f;
}

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


/* Navigation Bar */

.navbar {
  padding: 0 0 4.5rem;
}

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

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

.nav-link {
  font-size: 1.2rem;
  font-family: 'Montserrat';
  font-weight: 400;
}


/* Download Buttons */

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


/* Title Image */

.title-image {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
}

#features {
  padding: 7% 15%;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.features-box {
  text-align: center;
  padding: 5%;
}

.icon {
  color: #ef8172;
  margin-bottom: 1rem;
}

.icon:hover {
  color: #ff4c68;
}


/* Testimonial Section */

#testimonials {
  text-align: center;
  background-color: #ef8172;
  color: #fff;
}

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

#press {
  background-color: #ef8172;
  text-align: center;
  padding-bottom: 3%;
}

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

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


/* Pricing */

#pricing {
  padding: 100px;
}

.sign-up {
  margin-top: 35px;
}

.pricing-column {
  padding: 3% 2%;
}





  
  TinDog

  
  

  
  
  

  
  

  
  
  




  
    

      
      
        TinDog
        

        

          
            
              Contact
            
            
              Pricing
            
            
              Download
            
          
        
      




      

      
        
          Meet new and interesting dogs nearby
          
          
        

        
          
        

      
    

  


  

  
    

      
        
        Easy to use
        So easy to use, even your dog could do it.

      

      
        
        Elite Clientele
        We have all the dogs, the greatest dogs.

      

      
        
        Guaranteed to work
        Find the love of your dog's life or your money back.

      

    







  


  

  

    
      
        
          I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.
          
          Pebbles, New York
        
        
          My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.
          
          Beverly, Illinois
        

      
      
      
    





  


  

  
    
    
    
    

  


  

  

    A Plan for Every Dog's Needs
    Simple and affordable price plans for your and your dog.

    
      

        
          
            Chihuahua
          
          
            Free
            5 Matches Per Day
            10 Messages Per Day
            Unlimited App Usage
            
          

        
      



      

        
          
            Labrador
          
          
            $49 / mo
            Unlimited Matches
            Unlimited Messages
            Unlimited App Usage
            
          

        
      



      
        
          
            Mastiff
          
          
            $99 / mo
            Pirority Listing
            Unlimited Matches
            Unlimited Messages
            Unlimited App Usage
            
          

        
      

    







  


  

  

    Find the True Love of Your Dog's Life Today.
    
    

  


  

  

    © Copyright 2018 TinDog

user_8195688 · Answer

That's the default behavior of the browser on absolute or fixed positioning. Although it's still inside the container div, the width: 60% on .title-image no longer affects it as it's unable to find any parent element with its position set to relative or absolute.

Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relative to the page itself.

The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/#absolute

If what you want is to position the .title-image relative to it's parent div you must set its (the parent div) position to relative or absolute.

Example: https://jsfiddle.net/o9wjrcd7/

Hope that helps!

user_19364977 · Answer

just add

Position:relative;

to the parent of title-img. you are following the course full-stack course of angilia.

I was also having the same doubt

user_16877806 · Answer

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. I think you could try to position it relative and also reduce the rotation.

user_19958784 · Answer

try adding inline style to the parent of .title-image (col-lg-6) so it looks like this:

The reason for this is, angela used Bootsrap 4 in her course which give col-lg-6 default position's value of relative. meanwhile, in Bootstrap 5 col-lg-6 has default position's value of static

CMIIW

user_19305595 · Answer

I had the same problem, and I wasted like a day trying to solve that issue on my own. This problem is caused because of different version of bootstrap.

position: absolute; changes the size of the image depending on the size of its nearest ancestor, and its parent should have a position other than static.

You need to set the position of its parent to relative in order to solve this problem.

Can the absolute position cause an image to get bigger than it originally was?

5 Answers