Skip to main content

Absolute Positioning Inside Relative Positioning

For Website Designing and Development
Web designer Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” Moments. I remember it being a big deal for me when I first “got it”.

Here is a visual:



The relative positioning on the parent is the big deal here. Look what would happen if you forgot that:



Might not look like a big deal in this small example, but it really is a significant change. What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent. So if the browser window grows, that one in the bottom left is going to stick with the browser window, not hang back inside like his well behaved brother from the first image.

Once you “wrap” your head around this concept (rim-shot) you will find little uses for it all over the place, and start noticing examples of other places using it. It’s like when you learn a new word and then you start hearing it everywhere. Yeah.

Source : http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Popular posts from this blog

Mobile Web Design: Tips and Best Practices

Mobile Web Design Trends For 2009 Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up to date. In the past few years, one of the biggest areas of change has been the amount of Internet users who are accessing websites via phones and mobile devices. As a result, Web designers have a growing need to be educated in this area and ready to design websites that accommodate this audience. Because designing websites for mobile devices brings some unique situations and challenges into play, the subject requires a strategic approach from the designer and developer. In this article, we’ll look at the subject as a whole, including current trends, challenges, tips and a showcase of mobile websites. Plenty of helpful resources and articles are also linked to throughout the post, so if you’re interested in learning more about designing for mobiles, you should have plenty of information at your fingertips. 1....
Read more

Web Accessibility

  Web Accessibility: Making the Internet Inclusive for Everyone What Is Web Accessibility? Web accessibility means designing and developing websites so that people of all abilities and disabilities can use them effectively . An accessible website ensures that users with visual, auditory, motor, or cognitive impairments can perceive, understand, navigate, and interact with its content. Why Accessibility Matters Inclusive Experience: The web should be usable by everyone, regardless of physical or cognitive abilities. Legal Compliance: Many countries enforce accessibility laws (such as the ADA in the U.S. or the RPwD Act in India). Non-compliance can lead to legal action. Better User Experience: Accessible design benefits all users, including those on mobile devices, in noisy environments, or with slow internet connections. SEO Benefits: Search engines favor well-structured, semantic content, which overlaps with accessibility best practices. Core Principles ...
Read more

CSS Math Functions

  CSS Math Functions: A Simple Guide for Designers & Developers In modern CSS, math functions let you perform real calculations directly in your styles. This empowers your layouts, spacing, and responsive design with more flexibility and control. Let’s explore what CSS math functions are, why they matter, and how to use them. What Are CSS Math Functions? CSS math functions let you compute values in real time. Instead of hardcoding numbers, you can use formulas. The most commonly supported math functions are: calc() min() max() clamp() These allow mixing units (e.g., % + px ) or setting limits on values. Why Use Math Functions? Responsive design becomes easier — e.g. mix percentages and fixed px values. Dynamic spacing & sizing without needing many media queries. Constraints & boundaries — you can ensure a value stays between a minimum and maximum. Cleaner code — fewer manual adjustments. How Each Function Works + Examples 1. ca...
Read more