HTML layout is a lengthy, meticulous, but very creative process. Despite the fact that for most people involved in the IT field, typesetting of web pages may seem a boring routine, specialists who have a vocation for such a task, not only perform tasks efficiently, but also get tangible pleasure from the process itself.
However, before becoming an experienced typesetter, each beginner spends a lot of time studying various instructions and specifications both in HTML and in CSS. It’s about what CSS is, why it is needed and what “feints with ears” it allows you to do, as well as about one of its popular properties - Position Relative - we'll talk today.
What is CSS?
CSS abbreviation can be deciphered and translated into Russian as “cascading style sheets”. It sounds rather strange - on the one hand, it seems like the words are understandable, and on the other, the general meaning is not immediately grasped. Let's start with the simple - with the styles. This technology allows you to give objects on the page certain characteristics regarding the appearance, which can be registered only once, and used an infinite number of times.
The word “tables” in the official translation turned out to be almost random - in fact, the use of the word “sheets” or “lists” would be more appropriate here, however, the authors of the original translation decided that the CSS table is more like the list, and who we are such as to judge them now.
Finally, the word "cascading." The fact is that each element can have several styles at once, which can mix or even intersect. In such cases, the browser has to resort to a number of rules in order to correctly compose the appearance of a block that has several styles, while one of them, for example, has the Position Relative property, and the other has Position Absolute. In fact, such conflicts should not be allowed, but in large projects such confusion occurs quite often.
So, now that everything is clear with the name, let's look at one simple example. Let's say your site should have a large number of buttons designed in a certain way. They have properties such as size, shadow, transparency, color. Of course, you can specify these parameters by creating each button, but it will be much easier to use CSS. In practice, you need to describe a class in which the values ​​of all the above properties will be listed, and then, instead of a long listing, you will only need to indicate the name of this class in the tag of each button, after which the browser will paint these elements in the desired colors and give them proper "gloss".
What is the Position property for?
Now we pass directly to the Position property, for the sake of which this entire article was conceived. If you are familiar with English or have a good intuition, then you should already understand - this property is responsible for the location of the element. In fact, it is so, however, instead of defining a specific place, this property tells the browser how to position this or that element relative to the neighboring or the whole page as a whole.
What values ​​can the Position property take?
Our property can take several different values, there are only five of them. Here is a brief description of each of them:
- Position Inherit. This property allows you to copy position data of an element that is a parent. For example, if you have a div with the specified Position Relative, then the IMG inscribed in it with the inherit value will also get the Relative value.
- Position Static. This value is assigned to all elements automatically, unless otherwise specified. Elements fit into the position as they are mentioned in the code and are not available for various "frills", allowing you to change their position.
- Position Absolute. This value of the Position property is often resorted to in cases where it is necessary to create a "floating" element. With this property value, the element remains “invisible” to the rest of the page. That is, they are arranged as if our absolute element does not exist at all. He himself will always remain in place, no matter how far the page has been scrolled.
- Position Fixed. In many ways, this value is similar to the previous one, however, while the absolute element is attached to the parent, the fixed element uses only the coordinates of the upper left corner of the browser screen, not paying attention to the other elements that preceded it.
- Finally, Position Relative. This type of value allows you to position the element relative to the rest, which can be useful when creating adaptive markup, called "rubber" in the common people. Having this property, the element will “push apart” the rest, without losing the ability to change its location on the page.
Features of working with Position in various browsers
Not all browsers are equally compatible. While most alternative programs for Internet surfing without any hesitations perceive the value of Position absolutely correctly, the “chronically special” Internet Explorer considers this property depending on its version.
For example, using the IE6 browser already "buried", you cannot use the Fixed and Inherit values ​​- the donkey will simply ignore them. However, despite the fact that from the seventh version, the situation began to improve, and Fixed was already being processed, until Inherit, everyone’s favorite “browser for downloading other browsers” reached only in its eighth form.
The rest of the observers calmly process Position from the first versions, with the exception of Opera, which acquired support for this property in its 4 variations, released in the mid-90s.
Working with Position in Javascript
In fact, we included the story about how to work with the Position property in Javascript just for the sake of decency. Since this property does not have any special characters in the name, you can use JS without any changes, for example, to set div Position Relative, you should include the following line: div.style.position = 'relative'.
As you can see, everything is quite simple.
Why is Position Relative worth attention?
While most of the values ​​of the Position property, to put it mildly, "spat" on the surrounding elements using the value of "style position: relative", you should always remember the whole page as a whole, because improper use of it can greatly "skew" the entire contents of the screen .
In addition, only this property allows you to easily turn a fixed design into an adaptive one, because its use automatically affects the entire contents of the page. Further, we still have time to consider examples and errors of using this value, and you will see its tangible significance in practice.
When should relative positioning be used?
In addition to the layout of regular HTML pages , Position Relative is often used to create various interesting effects. For example, if you want any element to “come” to the page or, conversely, to smoothly go beyond its edges, then this particular property can help you realize this “feint”.
Such "tricks" are implemented through Javascript, or, if you are striving for a progressive layout, through CSS3 properties that allow you to customize the cyclic change in the value of a variable.
In addition, in some cases, it is possible to create “hybrid” Position Relative values. Although CSS does not allow setting something like position: absolute relative at the same time, using some tricks, you can still achieve this effect. This approach can come in handy when you need to create something like a complex
tooltip or context menu. Considering the examples, we will definitely give a description of the structure of such a "hybrid".
Relative Positioning Examples
Position Relative is a fairly simple but flexible tool that allows you to implement many interesting effects. In order not to waste time and space on writing useless template codes, we will give several oral algorithms that can decorate your site or its individual pages.
Let's start with the run-out line. Suppose you have a need for an element that will "move out" from the left edge of the screen and gradually move to its right side. To implement such a "mechanism", you should set position: relative; left: -100px, where -100 is the approximate number of pixels that make up the width of the block. A similar style will allow you to hide the block outside the screen, setting it to the “starting position”. Now you can use a script that will increment the value of the left property by one every few milliseconds until it becomes equal to the width of the browser window minus the width of the element. As a result, we get a block that appears from behind the left edge, rolls across the entire screen and “parks” at its right side.
Another example allows you to create "relatively absolute" elements. For example, you can enter the absolute inside another having Position Relative. As a result, we have a “relative” block that does not have a size, into which the absolute is inscribed, which can now appear in a position that depends on the elements preceding it.
Common mistakes when using Position Relative
The most common mistake when using Position Relative is that many layout designers forget about the ability to reserve space for a block that can be located anywhere. For example, if you have a fairly large one, located outside the screen and having relative positioning, a “gap” will gap in its place. However, even this property, which sometimes creates certain inconveniences, can be used for good, for example, by creating an interesting effect of a "self-assembled" site, in which all its blocks are gradually placed at the top: 0 position; left: 0; i.e. to its original place.