Position Relative - what is it? Detailed description
HTML layout is a long process, scrupulous,but very creative. Despite the fact that for most people working in the IT field, the layout of web pages can seem like a boring routine, specialists with a vocation for such a thing not only perform tasks qualitatively, but also receive tangible pleasure from the process itself.
However, before becoming an experienced web designer,each newcomer spends a lot of time learning various instructions and specifications for both the HTML language and its ally CSS. It is about what CSS is, what it is for and what "feints with ears" allows you to get up, and also about one of its popular properties - Position Relative - we'll talk today.
What is CSS?
The word "tables" in the official translation turned out to bealmost accidentally - in fact, it would be more appropriate to use the word "sheets" or "lists", nevertheless the authors of the original translation decided that the CSS looks more like a list than the list and who we are to judge them now.
Finally, the word "cascade". The fact is that each element can have several styles at once, which can be mixed or even intersected. In such cases, the browser has to resort to a number of rules in order to correctly compose the appearance of the block, which has several styles, while one of them, for example, has the Position Relative property and the other - Position Absolute. In fact, such conflicts can not be tolerated, but in large projects such confusion occurs quite often.
So, now, when the name is clear,let's look at one simple example. Let's say you have a large number of buttons on your website that are decorated in a certain way. They have such properties as size, shadow, transparency, color. Of course, you can specify these parameters, 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 enumeration, the tag of each button will only need to specify the name of this class, after which the browser will paint these elements in the necessary colors and give them proper "gloss".
Why do I need the Position property?
Now we pass directly to the propertyPosition, for which the whole 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 true, but instead of defining a specific place, this property tells the browser how to exactly place an item relative to the neighboring or the entire 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 the position data of the item that is the parent. For example, if you have a div with the specified Position Relative, the inscribed IMG with the inherit value will also get the value Relative.
- Position Static. This value is given to all elements automatically, unless specified otherwise. Elements fit into the position as they are mentioned in the code and are not available for various "delicacies" that allow them to change their position.
- Position Absolute. This value of the Position property is often used in cases where it is necessary to create a "floating" element. Having this property value, the element remains "invisible" for the rest of the page. That is, they are located as if our absolute element does not exist at all. He himself will always remain in place, no matter how far the page was scrolled.
- Position Fixed. In many respects this value is similar to the previous one, however, while the absolute element is attached to the parent, fixed uses only the coordinates of the upper-left corner of the browser screen, not paying attention to other elements that preceded it.
- Finally, Position Relative. This type of value allows you to position the element relative to the others, which can be useful when creating adaptive markup, called "rubber" in the common people. Having this property, the element will "move apart" the rest, without losing the ability to change its location on the page.
Features of work with Position in different browsers
Not all browsers are equally compatible. While most alternative programs for Internet surfing without any hitching perceive the value of Position is absolutely true, "chronically special" Internet Explorer considers this property depending on its version.
For example, using a "buried" browserIE6, you can not use the values Fixed and Inherit - "donkey" they simply ignore. However, despite the fact that from the seventh version the situation began to be corrected, and Fixed was already being processed, to Inherit everyone liked the "browser for downloading other browsers" got only in its eighth form.
The rest of the reviewers quietly handle Position from the first versions, with the exception of Opera, which acquired support for this property in its 4th variation, released in the mid-90s.
Working with Position in Javascript
In fact, a story about how to workwith the Position property in Javascript, we included only for the sake of propriety. Since this property does not have any special characters in the name, you can use JS without any changes, for example, to set the Position Relative div, you should include this line: div.style.position = 'relative'.
As you can see, everything is quite simple.
Why does Position Relative deserve special attention?
While most of the values of the propertyPosition, to put it mildly, "spitting" on the surrounding elements, using the value "style position: relative", it is always worth remembering the entire page as a whole, because its incorrect use can strongly "distort" the entire contents of the screen.
When should I use relative positioning?
In addition to the layout of conventional HTML pages, PositionRelative is often used to create various interesting effects. For example, if you want an element to "come" to a page or, on the contrary, smoothly go for its edges, then this property can help you implement this "feint".
Similar "tricks" are implemented through Javascript,or, if you are striving for progressive layout, through CSS3 properties that allow you to configure a cyclic change in the value of a variable.
Examples of using relative positioning
Position Relative - it's pretty simple, butA flexible tool that allows you to implement many interesting effects. In order not to waste time and space on writing useless template codes, we'll give you some verbal algorithms that can decorate your site or its individual pages.
Let's start with the "running out" line. Suppose you have a need for an element that will "travel" from behind the left edge of the screen and gradually move to its right side. To implement such a "mechanism", you need to set the position: relative; left: -100px, where -100 is the approximate number of pixels that make up the width of the block. This style allows you to hide the block outside the screen, setting it to the "starting position". Now you can use a script that increments the value of the left property 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, rolled through the entire screen and "parked" at its right side.
Another example allows you to create"Relatively-absolute" elements. For example, you can enter an absolute inside another that has a Position Relative. As a result, we have a "relative" block that does not have a size, into which an absolute one is inscribed, capable of manifesting itself in a position that depends on the elements preceding it.
Common errors when using Position Relative
The most common error withUsing Position Relative is that many layout designers forget about the ability to reserve space for a block that can be anywhere. For example, if you have a fairly large one, placed outside the screen and having a relative positioning, a "hole" will appear in its place. However, even this property, sometimes creating certain inconveniences, can be used for good, for example, creating an interesting effect of a "self-gathering" site in which all its blocks are gradually placed on the top: 0 position; left: 0; that is, in its original place.
