In case you’re a entrance finish developer or a designer who likes to code, CSS-based layouts are on the very core of your work. In what may be a refresher for some, and even an “a-ha!” for others, let’s have a look at the CSS place property to see how we are able to use it to create standards-compliant, table-free CSS layouts.
Article Continues Under
CSS positioning is commonly misunderstood. Generally, in a bug-fixing fury, we apply completely different place values to a given selector till we get one which works. It is a tedious course of that may work for a time, but it surely behooves us to know why specifying one thing like place: relative can repair your structure bug. My hope is that we are able to be taught the place property’s values and behaviors, and most significantly, how a worth can have an effect on your markup.
The CSS specification affords us 5 place properties: static, relative, absolute, fastened, and inherit. Every property serves a particular function. Understanding that function is the important thing to mastering CSS-based layouts.
Get with the circulate#section2
First, let’s take a step again to acknowledge the world we’re working in. Very like our actual world, in CSS, we work inside boundaries. In CSS, this boundary is known as the traditional circulate. In response to the CSS 2.1 spec:
Packing containers within the regular circulate belong to a formatting context, which can be block or inline, however not each concurrently. Block bins take part in a block formatting context. Inline bins take part in an inline formatting context.
Consider a “field,” as described by the spec as a wood block—not not like those you performed with as a younger whippersnapper. Now, consider the regular circulate as a legislation much like the legislation of gravity. The conventional circulate of the doc is how your components stack one on high of one another, from the highest down, within the order wherein they seem in your markup. Chances are you’ll keep in mind stacking alphabet blocks into large towers: The conventional circulate is not any completely different than these wood blocks certain by the legislation of gravity. As a baby, you had one block on high of one other; in your markup, you may have one factor after one other. What you couldn’t do as a baby, nonetheless, was give these blocks properties that might defy the legislation of gravity. The entire sudden, CSS appears quite a bit cooler than these alphabet blocks.
Static and relative—nothing new right here#section3
The static and relative place properties behave like your childhood blocks—they stack as you’ll count on. Notice that static is the default place worth of a component, must you fail to use another worth. You probably have three statically positioned components in your code, they may stack one on high of the subsequent, as you may count on. Let’s check out an instance with three components, all with a place worth of static:
#box_1 {
place: static;
width: 200px;
top: 200px;
background: #ee3e64;
}
#box_2 {
place: static;
width: 200px;
top: 200px;
background: #44accf;
}
#box_3 {
place: static;
width: 200px;
top: 200px;
background: #b7d84b;
}In instance A, you’ll be able to see three components stacked like a easy tower. Fascinating, isn’t it? That is block constructing 101. Congratulations!
You should use the static worth for easy, single-column layouts the place every factor should sit on high of the subsequent one. If you wish to begin shifting these components round utilizing offset properties corresponding to high, proper, backside, and left, you’re out of luck. These properties are unavailable to a static factor. In actual fact, a static factor can’t even create a brand new coordinate system for baby components. Wait. What? You misplaced me at coordinate system. Roger that, Roger. Let’s clarify utilizing the relative worth.
Comparatively positioned components behave identical to statically positioned components; they play properly with others, stack properly, and don’t trigger a ruckus. Onerous to imagine, proper? Check out our earlier instance. This time, we’ve utilized the relative worth:
#box_1 {
place: relative;
width: 200px;
top: 200px;
background: #ee3e64;
}
#box_2 {
place: relative;
width: 200px;
top: 200px;
background: #44accf;
}
#box_3 {
place: relative;
width: 200px;
top: 200px;
background: #b7d84b;
}Instance B proves that comparatively positioned components behave precisely the identical approach as statically positioned components. What it’s possible you’ll not know is that components with a relative place worth are like Clark Kent—they conceal far higher powers than their static siblings.
For starters, we are able to modify a comparatively positioned factor with offset properties: high, proper, backside, and left. Utilizing the markup from our earlier instance, let’s add an offset place to #box_2:
#box_2 {
place: relative;
left: 200px;
width: 200px;
top: 200px;
background: #44accf;
}Instance C exhibits this relative positioning in motion. Our three blocks are stacked up properly, however this time the blue block (#box_2) is pushed out 200 pixels from the left. That is the place we begin to bend the legislation of gravity to our will. The blue block remains to be within the circulate of the doc—components are stacking one on high of the opposite—however discover the inexperienced block (#box_3) on the underside. It’s sitting beneath the blue block, although the blue block isn’t instantly above it. While you use the offset property to shift a comparatively positioned factor, it doesn’t have an effect on the factor(s) that observe. The inexperienced field remains to be positioned as if the blue field have been in its non-offset place. Attempt that together with your alphabet block tower.
Making a coordinate system for baby components is one other one of many relative positioning property’s tremendous powers. A coordinate system is a reference level for offset properties. Recall in instance C, our blue block (#box_2) shouldn’t be sitting within another components, so the coordinate system it’s utilizing to offset itself 200 pixels from the left is the doc itself. If we place the #box_2 factor within #box_1, we’ll get a special outcome, as #box_2 will place itself relative to the coordinate system from #box_1. For the subsequent instance, we received’t change any CSS, we’ll modify our HTML to maneuver #box_2 within #box_1:
<div id="box_1">
<div id="box_2"></div>
</div>Instance D exhibits our new markup. Due to the brand new coordinate system, the blue block measures its offset 200 pixels from the left of the pink block (#box_1) as a substitute of the doc. This observe is extra frequent with components set to place: absolute—the way in which you want you might have constructed towers while you have been youthful.
Absolute—anyplace, anytime#section4
If the relative worth acts like Superman, then the absolute worth mirrors Inception—a spot the place you design your individual world. In contrast to the static and relative values, a fully positioned factor is faraway from the traditional circulate. This implies you’ll be able to put it anyplace, and it received’t have an effect on or be affected by another factor within the circulate. Consider it as a component with an enormous strip of velcro on its again. Simply inform it the place to stay and it sticks. Precisely just like the relative worth, completely positioned components reply to offset properties for positioning. You may set a component to high: 100px and left: 200px; and that factor will sit precisely 100px from the highest and 200px from the left of the doc. Let’s have a look at an instance utilizing 4 components:
#box_1 {
place: absolute;
high: 0;
left: 0;
width: 200px;
top: 200px;
background: #ee3e64;
}
#box_2 {
place: absolute;
high: 0;
proper: 0;
width: 200px;
top: 200px;
background: #44accf;
}
#box_3 {
place: absolute;
backside: 0;
left: 0;
width: 200px;
top: 200px;
background: #b7d84b;
}
#box_4 {
place: absolute;
backside: 0;
proper: 0;
width: 200px;
top: 200px;
background: #ebde52;
}Instance E exhibits 4 bins, every in a nook of the browser window. Since we set every field’s place worth to absolute, we’ve primarily velcroed a field to every nook of our browser window. As you resize the browser, these bins will keep of their respective corners. In case you shrink the browser window in order that the bins overlap, you’ll discover that there is no such thing as a interplay in any respect—that’s as a result of they’re out of the doc’s regular circulate.
Identical to relative components, absolute components create a brand new coordinate system for baby components. Instance F extends Instance E, with an orange factor set inside every field. Discover the offset coordinates are in respect to every guardian factor.
To not be outdone by different place property values, the absolute worth affords some actually cool performance utilizing the offset property. Use two or all 4 offset properties, and you’ll stretch a component with out defining any width or top—it’s certain solely by its guardian factor or the doc itself. Let’s see it in motion. Contemplate the next code:
#box_a {
place: absolute;
high: 10px;
proper: 10px;
backside: 10px;
left: 10px;
background: pink;
}
#box_b {
place: absolute;
high: 20px;
proper: 20px;
backside: 20px;
left: 20px;
background: white;
}In instance G we’ve created a border offset 10 pixels by the doc, and it’s completely fluid because the doc resize—all with absolute positioning and offsets. In one other instance, we are able to create a two-column structure that fills your complete top of the doc. Right here is the CSS:
#box_1 {
place: absolute;
high: 0;
proper: 20%;
backside: 0;
left: 0;
background: #ee3e64;
}
#box_2 {
place: absolute;
high: 0;
proper: 0;
backside: 0;
left: 80%;
background: #b7d84b;
}Instance H exhibits a full-screen, two-column structure. Whereas this doubtless isn’t the very best method to a two-column structure, it nonetheless exhibits the facility the absolute worth holds. Utilizing some inventive considering you’ll find a number of helpful functions for place: absolute. Related tips use solely a single offset worth. For instance:
#box_1 {
width: 200px;
top: 200px;
background: #ee3e64;
}
#box_2 {
place: absolute;
left: 100px;
width: 200px;
top: 200px;
background: #44accf;
}In instance H2, give attention to the blue block (#box_2). Discover how I exploit just one offset, left: 100px;. This permits the #box_2 factor to take care of its high edge and nonetheless shift 100 pixels to the left. If we utilized a second offset to the highest, we’d see that our blue block (#box_2) is pulled to the highest of the doc. See that right here, in instance H3:
#box_2 {
place: absolute;
high: 0;
left: 100px;
width: 200px;
top: 200px;
background: #44accf;
}Mounted—at all times there#section5
A component with place: fastened shares all the foundations of a fully positioned factor, besides that the viewport (browser/system window) positions the fastened factor, versus any guardian factor. Moreover, a fastened factor doesn’t scroll with the doc. It stays, properly…fastened. Let’s have a look at an instance:
#box_2 {
place: fastened;
backside: 0;
left: 0;
proper: 0;
}Instance I exhibits a footer with some copyright textual content in it as a fastened factor. As you scroll, discover that it doesn’t transfer. Discover that the left and proper offset properties are set to zero. Because the fastened worth behaves much like the absolute worth, we are able to stretch the width of the factor to suit the viewport whereas fixing the factor to the underside utilizing backside: 0;. Use warning with the fastened worth: Assist in older browsers is spotty at greatest. For instance, older variations of Web Explorer render fastened components as static components. And, you now know that static components don’t behave like fastened components, proper? In case you do plan to make use of fastened components in a structure, there are a number of options that may assist make your factor behave correctly in browsers that don’t help the fastened worth.
Inherit—One thing for nothing#section6
As I discussed at the start of this text, there are 5 values accessible to the place property. The fifth worth is inherit. It really works because the identify implies: The factor inherits the worth of its guardian factor. Usually, place property components don’t naturally inherit their guardian’s values—the static worth is assigned if no place worth is given. Finally, you’ll be able to kind inherit or the guardian factor’s worth and get the identical outcome.
In motion#section7
All this speak and no motion. Let’s check out a real-world instance web site that makes use of all of the place values. Instance J exhibits a typical web site structure with a header, navigation, content material, and footer. Let’s stroll by every factor, talk about its place property, and why we selected that property.
Let’s begin with our #container factor. That is merely the containing factor that I’m utilizing to heart our content material throughout the viewport. The #nav factor is the primary factor inside our #container factor. No place property is assigned to the #nav factor, so by default, it’s set to static. That is advantageous: We don’t have to do something to offset this factor, or create any new coordinate techniques with it. We might want to try this with #content material on our subsequent factor, so for that factor, we’ve utilized a place property of relative.
Since we’re not utilizing any offsets right here, the place worth has no actual affect on the #content material factor, however we positioned it there to create a brand new coordinate system for the #callout factor. Our #callout factor is ready to place: absolute, and since its guardian factor, #content material is ready to relative, the offset properties we’re utilizing on #callout are primarily based off the coordinates created by #content material. The #callout factor makes use of a detrimental 80px pixel offset on the precise to tug the factor outdoors of its containing guardian factor. Moreover, I’ve used one of many cooler options of the absolute worth on our #callout factor: by setting the highest and backside offsets to 100px, I’ve stretched the #callout factor to the complete top of the doc minus the 100px offset on high and backside.
Because the #callout factor has an absolute worth, it doesn’t have an effect on different components. Subsequently, we have to add some padding to the #content material factor to maintain our paragraphs from disappearing beneath it. Setting the padding on the precise of #content material to 250px retains our content material in full view for our customers. To deliver up the rear, we’ve added a footer with a fastened place to maintain it fastened to the underside of the web page. As we scroll, our footer stays in place. Simply as we added padding to the #content material to maintain our paragraphs from disappearing below it, we have to do the identical for the #footer factor as it’s a sibling of the absolute worth. Including 60px to the #content material factor’s backside padding ensures that we are able to scroll your complete doc and never miss any textual content that may usually be hidden below the #footer factor.
Now we’ve got a pleasant, easy structure with navigation, some content material, a callout space, and a footer utilizing static, relative, absolute, and fastened components. Since we’re utilizing the fastened worth on this structure, we must always apply some methods to make it possible for older browsers nonetheless respect our design. [Note: There used to be a link to sample techniques, but that site has since been taken over by malware. Apologies. —Ed.]
With the place property’s energy, you’ll be able to accomplish many a structure with confidence and success. Fortunately, 80% of the place property values have glorious help in each trendy and older browsers. The fastened worth is the one which it is best to be careful for. Understanding the core of those property values offers you a strong CSS-based structure basis, restricted solely by your creativeness. Hopefully, your days of guessing place values in a last-minute bug repair frenzy are actually over.