Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
A position property is what allows you to manipulate the location of an element. It has multiple values and properties so that you can change the location based to your own liking. These assist when dealing with multiple elements or a parent and child element.
One of the first code examples we’re going to show is a positioned element in a relative position that will be taken down 10px. Relative is one of the many different values for the position property.
.element { position: relative; top: 10px; }
Here is a look at the definitions of each individual value:
Using a child element with an absolute value is a good way to see how it interacts with the parent element. The parent element will act as if the child is not there.
.element { position: absolute; }
While trying to set other values like left/right or bottom/top, you’ll find that the child element will respond to commands and dimensions from the document instead of its parent element. A form of absolute protest you could say.
The first thing you’ll want to do is to create two elements. We’re going to make them boxes so we can test them out. The parent box is going to be a relative box, nestled inside of the parent element will be child element that has an absolute position. Create it with these following dimensions, the CSS code will look something like this.
div.parentElement{ position: relative; width: 400px; height: 200px; border: solid #5618ad; } div.childElement { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: solid #5618ad; }
In order to display your text in the middle of the code example screen, add a little something at the bottom to do so.
body { display: flex; justify-content: center; align-items: center; }
Here is the code to play with and test out the position properties in action with relation to the parent and child elements with each respective absolute and relative value. As you’ll be able to tell, the position of a relative element is unaffected by scrolling, watch out for this then by using the proper values. Play around with this and learn how to develop a element based on its position and how it can react with others.
See the Pen CSS Position Example by Mike Colagrossi (@SantinoMPC) on CodePen.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareDevelopIntelligence has been in the technical/software development learning and training industry for nearly 20 years. We’ve provided learning solutions to more than 48,000 engineers, across 220 organizations worldwide.
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2022 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.