Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Use Absolute Positioning with Your Images

Your guide to using absolute bottom positioning with your images so that they are fixed and appear to peek over a designated break line.

You can create beautiful web pages by using small and simple CSS tricks such as absolute positioning with your images. This post walks you through how to use absolute positioning to enhance your web design.

What is absolute positioning?

Before we get to how you can do that, let's talk about what absolute positioning is. There are five ways to position elements on a page: static, relative, absolute, fixed, or sticky. By default, all the elements on the page have a static position.

Absolutely positioning an element will remove that element out of the page's workflow and will make it behave independently from all the other elements on the page. The absolutely positioned element can only be positioned in reference to its parent element. If it doesn't have a parent element, the HTML element will be its parent. The key to absolute positioning an element inside another element is to make the parent element's position relative and make the child element's position absolute:

.parent {
	position: relative;
}
.child {
	position: absolute;
	bottom: 0;
}

In our example, the element that contains the image has absolute positioning and its direct parent which is the div element with the .container class has a position of relative. Also, a small note: Normally, we write "position: absolute;" or "position: relative" in our CSS file to make an element relatively or absolutely positioned but since we're using Bootstrap, we can take advantage of Bootstrap's shorthand utilities to configure positioning. We can simply give the tag elements quick positioning classes such as .position-static, .position-relative, .position-absolute, .position-sticky, and .position-fixed.

<section>
  <div class="container position-relative py-lg-6 py-5">
    <div class="row">
      <h2 class="display-4 mb-0 text-white">Be part of the <span class="d-block font-weight-bold">Lunar XPerience</span></h2>
      <p class="lead my-4 text-white">If you're an explorer, then the moon is calling.<br>
      Join the LunarXP mission where new worlds await.</p>
      <div class="spacer"></div>
    </div>
    <div class="position-absolute left-0 w-100 text-center d-md-block image-container">
      <img alt="Support Crew" src="https://raw.githubusercontent.com/solodev/absolutely-positioned-images/master/images/image.png" class="pt-5">
    </div>
  </div>
</section>

CSS

Our image sits at the bottom of our container div so if we position it as bottom: 0; it will be positioned right at the bottom of the container. Over here we wanted to be a bit creative and make our astronaut sit on the ledge of our container so we gave it a bottom position value of -80px. That way half of the astronaut image will be below the container.

section {
	background-color: #0a001a;
  }
  
  .text-white {
	text-align: center;
	width: 100%;
  }
  
  .left-0 {
	left: 0 !important;
  }
  
  .image-container {
	bottom: -80px;
  }
  
  img {
	width: 100%;
	max-width: 220px;
	transform: rotate(-45deg);
  }
  
  .spacer {
	width: 100%;
	height: 8rem;
  }
  
  .w-100 {
	width: 100% !important;
  }
  
  .position-absolute {
	position: absolute !important;
  }
  
  .position-relative {
	position: relative !important;
  }
  
  @media (min-width: 768px) {
	.d-md-block {
	  display: block !important;
	}
  }
  
  @media (max-width: 767.98px) {
  
	.h2,
	h2 {
	  font-size: calc(1.325rem + 0.9vw);
	}
  }
  
  h1,
  h2 {
	font-weight: 500;
  }
  
  .h2,
  h2 {
	font-size: 1.8rem;
	margin-bottom: 0.8rem;
  }

And there it is. With some simple tweaks to our HTML and CSS, we have an image that is fixed at the bottom of our section.

Download from Github

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev