The value of the position property. position: absolute in the positioned parent. Interaction of absolute blocks with parent elements

letter-spacing line-height list-style margin max-height max-width min-height min-width outline overflow padding position right text-align text-decoration text-indent text-transform top vertical-align white-space width word-spacing

HTML reference HTML lessons Video courses on creating a website

With the POSITION property

Property	Values	Etc*	Hc*
position	static, relative, absolute, fixed, inherit	+	-

Property defines element positioning scheme regarding his parent. Elements with absolute and fixed positioning are treated as block ones.

Values:

static— static positioning, as is.
inherit— inheritance of properties from the parent.

Let's look at the remaining values in more detail.

relative value: relative positioning

The element is shifted relative to its position by the amounts specified by the values of the Bottom, Left, Right, Top properties. This does not affect the arrangement of elements in the normal flow following it, as if it had not moved.

Element ( position: relative; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;)
— positioning is set for the block with the picture relative and offset from top by 25px and from left by 50px. The element has moved relative to the normal flow, in practice doubling these values:

absolute value: absolute positioning

An absolute positioned element takes the position defined by values properties Bottom, Left, Right, Top, which specify its offset relative to the boundaries of the parent.

Moreover, the value of the property Position the parent element affects the size and position of the positioned one. If it has a value static or there is no parent, then the offset occurs relative to the borders of the browser window. Absolutely positioned blocks are excluded from the normal flow without affecting the placement of other elements.

Element ( position: absolute; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;)

— similar to the previous example, only absolute positioning is taken for the element. It overlapped the previous element, the offset was measured from the boundaries of the parent:

Meaning fixed: fixed positioning

The position of elements with fixed positioning is determined in the same way as for absolutely positioned ones. The only difference is that they are strictly tied to the boundaries of the viewing area and do not change their position in the browser window when scrolling the page.

Use value fixed rarely. Typically this is horizontal menu at the top or bottom of the page, as in Yandex mail.

Z-INDEX property

Property	Values	Etc*	Hc*
INTEGER, auto, inherit	+	-

The property specifies the placement of a positioned element relative to the Z axis. What this means: elements are stacked on top of each other in ascending order - than more value z-index properties, the higher the element is located. Valid only for elements that have a property value set Position and different from static.

Values:

auto— elements are placed in the order of their location in the page code.
inherit- inheritance from a parent.

Element-1, .element-2, .element-3 ( position:relative;)
.element-1 ( z-index:3; left:40px; top:50px; font-size:46px;)
.element-2 ( z-index:2; left:50px;)
.element-3 ( z-index:1; top:-50px; font-size:76px; color:#999;)

— we have an image as the second element. The placement order of the first and third elements has changed. The bottom element-1 was placed on top, and the 3rd element turned out to be the bottom “layer”:

Hello, dear readers of the blog site. Today we will talk about principles Html positioning elements with using CSS Position rules (with values absolute, relative and fixed) and properties specifying the left, right, top and bottom offsets. See the star in the lower left corner? After reading the article to the end, you will find out how it got there.

In the last article we talked about one of the fundamental ones, which helps to break the normal flow of successive HTML code tags. It allows you to implement, on which site building is now mainly based. But not Float alone...

Position relative - relative positioning

There is also Position, which is responsible for positioning tags using cascading style sheets and also allows break the normal flow. In understanding, this rule will be a little more complicated than the previously discussed float, but I think we can handle it.

It has four possible values (static | relative | absolute | fixed). How can we know this? Well, of course, from the specification, which is posted on the official website:

The default value is position: static. Those. in a normal flow, the two CSS rules that can break it have default values of static and float:none. As soon as one of these values changes, the normal flow of HTML code in this place will be disrupted, because now this tag can interact with its neighbors in a completely different way or even not interact at all.

Let's start with relative positioning, which will correspond to the value position: relative. After we register it for a tag, we will be able to set the offset (position) for this element using additional rules Left, right, top and bottom(left, right, up and down, respectively):

The default for all four is Auto. When we specify the position: relative rule for a tag, the indentation values on all sides are reset to zero and you are given the opportunity to set them yourself.

Need to understand how indents are set. For example, left: 400px means indent from the left side to the right by the corresponding amount, and top: 100px means from the top side down. If you specify negative values for Left, right, top, and bottom, the element will move in the opposite direction (for example, top is to the top and Left is to the left).

Let's look at using relative on a floated element. Let us have two Div containers, which we will tint with different background colors for clarity using .

We will initially make the first container float to the left using the corresponding property, and since it will be empty, then we will give it (and indentation using margin):

text text...

As a result, we will get something like this oil painting:

The first container, as expected, floats to the left. At the same time, the second block itself does not seem to notice this (because it), but it does notice the inline text element that flows around our floating block.

Now let's add position: relative to the CSS rules for the first container and set the left and top padding using Left and top:

text text...

As a result, we will see that our floating element has moved according to the specified margins:

Notice that the text still continues to flow around it as if it were still standing in place. Those. When constructing many Html tags, they consider that they are in their rightful place (without taking into account the Left and Top shifts we set in the rules).

But not all tags will do this, otherwise we would not see any changes. Nearest ancestor with scroll(in our case this will be the Html tag, i.e. actually the viewing area) these changes will be noticed.

The principle of operation of relative is not complicated, but it is not entirely clear why it can be used in practice. In fact this rule is used in conjunction with position absolute, and in this form it finds very great application. But first things first.

Position absolute - absolute positioning in CSS

Let's move on to review absolute positioning. The easiest way to start looking at this CSS rule is with an illustrative example. Let's say that inside the Div container we have an inline Span tag, for which we will set absolute positioning.

But first, let's look at this construction without adding “position: absolute”. At the same time, to emphasize the line of the Span, we will add a height to it, which will not be applied anyway, and this time we will add the CSS code, for a change, not through the Head construct:

First second and third

For the Div, we also set the left margin to 100px. Well, now let's see what changes if we give our Span line tag absolute positioning by adding CSS position absolute rules:

#abs span( background:#C0FFC0; height:100px; position:absolute; )>

Something strange happened. Judging by the fact that the height:100px property was applied to Span, it has ceased to be an inline tag. Then, obviously, the fragments “first” and “third” joined each other, as if the element with the word “second” no longer existed between them. This is exactly how absolute positioning works in CSS.

But let's look at everything point by point when setting a property to an element "position: absolute":

The tag for which this rule is specified becomes a block tag
The dimensions of this block will be determined by the content it contains (unless you specify them explicitly using width and height).

Just like for floating elements (with Float specified), if “position: absolute” is applied to the tag, the Margin-colloapse effect for such tags will not appear. Those. No one will be able to transfer their vertical indents to him and he will not be able to transfer them to anyone either (he does not share vertical indents with anyone).

If you remember the previous article from the “” section, you will see that all three of these points were observed when creating floating elements using Float.

Therefore, if Float was already set for a tag, but then “position: absolute” was specified for it, then the first one is reset by the browser (it is responsible for parsing the code) to None (the default value), because there is no point in implementing two identical models.

A tag with “position: absolute” specified does not interact with any other Html code elements except its closest scrolling parent. All other tags in the code simply do not notice an element with absolute positioning (and this can be seen from our example)

This is all good, but with the help of “absolute” we must carry out absolute positioning. Well, actually, this is actually true. In combination with it, we can use the same four CSS rules: Left, right, top and bottom. How will they work with absolute positioning?

They will still set an offset, but the offset is no longer relative to the current position of the element, but relative to the boundaries of its container.

And the concept itself container for absolutely positioned elements will differ from the generally accepted one. From previous articles, you may remember that the container for the Html tag is the viewport, and for all others the container is the parent content area. This will not be the case for a tag with position absolute specified.

With absolute positioning, we will be able to assign the container ourselves (it will be the first of the ancestors that has position value is different from static, used by default).

Let's say if we set only absolute positioning, but did not specify any values for the Left, right, top and bottom rules, then the default Auto value will be used for them and such an element will remain in its place (as in our last screenshot). Everything should be clear here.

CSS uses the ancestor-child structure, which I already wrote about in some detail in the article about . Our task, when defining a container for an absolute positioned tag, will be to find an ancestor with a position that has a value other than static (i.e. when it was explicitly specified).

In our example, we did not assign a position to any of the ancestors of the Span tag, so when we reach the very top (the Html tag) we will stop there. Let's set zero padding for the example discussed just above and make sure we're right:

#abs span( background:#C0FFC0; height:100px; position:absolute; left:0; top:0; )>

As a result, the absolutely positioned tag was pressed against the zero reference point of the viewport. But we are free ourselves select a container for an element with the specified position absolute. How can this be done?

The combination of position absolute and relative in Div layout

Well, why not use the CSS rule “position: relative” for this. We will write it in the required ancestor tag (which will eventually become a container for an absolutely positioned element), and will not write the values Left, right, top or bottom, thereby, in fact, not making any changes at all to the position of this ancestor (it will remain in the normal thread), but assigning it container and the beginning of the report for our absolute positioning.

If we write "relative" for Body tag, then our picture will change a little:

First second and third

You see, characteristic indentations have appeared indicating that the upper left corner of the Body tag is now taken as the starting point. Remember that the default values for this tag specify a margin of 8 pixels, which is what we see:

Now let’s, in addition to what has already been done, write “position: relative” for the Div container, inside of which the Span tag lives:

First second and third

As we see, the picture has changed. Despite the fact that relative is specified for both Body and Div, it was Div that became the container for the absolutely positioned Span, because he is first ancestor, whose position value is other than static.

Moreover, if we also write , for our Div, we will see that the content area with the existing internal padding will be used as a container for absolute positioning:

#abs( background:#FFC0C0; margin-left: 100px; position: relative; border:12px dotted #ccf; padding:20px; )

As can be seen from the example, the reference point is located in the upper left corner inside the element frame (along its inner border). Hence the rule follows that for tags with “position: relative” (which are containers with absolute positioning), it would be better not to use a frame at all to avoid excesses.

Indents (offset) Left, right, top and bottom can be set not only in absolute units (read about ), but also in percentages, which will be taken from the width (left and right) and height (top and bottom) of the resulting container. Those. "top:100%" will correspond to 100% of the container's height, and "left:100%" will correspond to 100% of its width.

And it was the interaction described above that I had in mind when talking about combination of position absolute and relative. Thanks to this, we have the opportunity to choose the container ourselves, or, in other words, the starting point for absolute positioning. Why is this link used in practice?

To implement a task similar to, for example, or the so-called Litebox for displaying a full-size photo, they can use this principle.

Those. if you need on the page form the appearance and hiding of an element, which, when it appears, will not affect all other tags (interact with them). In this case, the appearance of an absolutely positioned block will not entail jerking and restructuring of the entire web page.

For a drop-down menu, do something like the following. When you hover the mouse cursor (set in CSS with ) over the root menu item, an element positioned absolutely positioned with “absolute” appears (nested menu items created based on ). This drop-down list appears next to the root menu item for the simple reason that position: relative is specified in it. All.

Position fixed - snap to viewport

The last positioning method is "position: fixed". The previously discussed methods were designed to be placed relative to any Html code elements. But if we start scrolling the page, then its tags (even those with absolute or relative positioning) move up (or down).

But when using fixed this will no longer happen. An element positioned in this way will always be in the same position in the viewport, regardless of the scrolling of the web page. You've probably already come across such options on websites. For example, a fairly popular plugin for WordPress called .

For a tag with the specified position:fixed, no one is looking for a container, because it is the viewport itself. This is precisely the difference from “absolute”, and everything else is the same. Blocks with fixed placement behave as you scroll the page as if they were elements of the interface of your browser window (they are always at hand).

This way, for example, toolbars, drop-down panels with the ability to leave feedback, etc. are implemented. things. As an example on this page I set position: fixed for a small picture in the lower left corner of your screen (viewport):

That’s all for today, in the next article we’ll talk about , which is applicable only to already positioned code elements, i.e. for which either fixed, relative, or absolute are specified.

Good luck to you! See you soon on the pages of the blog site

You can watch more videos by going to

");">

Positioning and free movement of elements

1. Types of positioning

The position property allows you to precisely specify the new location of the block relative to where it would be in the normal flow of the document. By default, all elements are arranged sequentially one after another in the order in which they are defined in the structure of the HTML document. The property is not inherited.

position
Meaning:
static	The default value means no positioning. Elements are displayed sequentially one after another in the order in which they are defined in the HTML document. Used to clear any other positioning value.
relative	A relatively positioned element is moved from its normal location in different directions relative to the boundaries parent container, and the space it occupied does not disappear. However, such an element may overlap other content on the page. If for a relatively positioned element you set the properties top and bottom or left and right at the same time, then in the first case only top will work, in the second - left. Relative positioning allows you to set a z-index for an element, as well as absolutely position child elements within a block.
absolute	An absolutely positioned element is completely removed from the document flow and positioned relative to the boundaries of its container block (another element or browser window). The container block for an absolutely positioned element is the closest ancestor element whose position property value is not static . The location of the element's edges is determined using the offset properties. The space that such an element occupied collapses as if the element did not exist on the page. An absolutely positioned element can overlap or be superimposed by other elements (due to the z-index property). Any absolutely positioned element generates a block, that is, it takes on the value display: block; .
fixed	Fixes an element at a specified location on the page. The container block of a fixed element is the viewport, that is, the element is always fixed relative to the browser window and does not change its position while scrolling the page. The element itself is completely removed from the main document flow and created in a new document flow.
initial	Sets the property value to the default value.
inherit	Inherits the property value from the parent element.

Rice. 1. Difference between static, relative and absolute positioning

2. Offset properties

Properties describe the offset relative to the nearest side of the container block. Set for elements for which the position property value is not static . They can take both positive and negative values. Not inherited.

For the top property, positive values move the top edge of the positioned element below, and negative values move the top edge of its container block. For the left property, positive values move the edge of the positioned element to the right, and negative values move the edge of the positioned element to the left. That is, positive values move the element inside the container block, and negative values move it outside it.

3. Positioning within an element

For the container block of an absolutely positioned element, the position: relative property is set without offsets. This allows elements to be positioned within a container element.

.wrap ( padding: 10px; height: 150px; position: relative; background: #e7e6d4; text-align: right; border: 3px dashed #645a4e; ) .white ( position: absolute; width: 200px; top: 10px; left : 10px; padding: 10px; background: #ffffff; border: 3px dashed #312a22;

Rice. 2. Absolute relative positioning

4. Positioning problems

1. If the width or height of an absolutely positioned element is set to auto , then its value will be determined by the width or height of the element's content. If the width or height is declared explicitly, then this is the value that will be assigned.
2. If inside a block with position: absolute there are elements for which the float is set, then the height of this element will be equal to the height of the tallest of these elements.
3. For an element with position: absolute or position: fixed, you cannot simultaneously set the float property, but for an element with position: relative, you can.
4. If the ancestor of the positioned element is a block element, then the block container is formed by the content area limited by the border. If the ancestor is an inline element, the container block is formed by the outer boundary of its contents. If there is no ancestor, the container block is the body element.

5. Free movement of elements

In normal order, block elements are rendered starting from the top edge of the browser window and working toward the bottom edge. The float property allows you to move any element, aligning it to the left or right edge of the web page or the container element that contains it. In this case, other block elements will ignore it, and inline elements will shift to the right or left, freeing up space for it and flowing around it.

Rice. 3. Free movement of elements

A floating block takes on the dimensions of its contents, taking into account padding and borders. The top and bottom margins of floating elements do not collapse. The float property applies to both block elements and inline elements.

The left or right outer edge of a moved element, unlike positioned elements, cannot be located to the left (or right) of the inner edge of its container block, i.e. go beyond its boundaries. Moreover, if the container block is set to padding, then the floating block will be spaced from the edge of the container block at a specified distance.

The property automatically changes the calculated (displayed in the browser) value display properties to display: block for the following values: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table- footer-group . The value of inline-table changes to table .

The property has no effect on elements with display: flex and display: inline-flex .

When using the float property on block elements, be sure to specify a width. This will create space for other content in the browser. But if the combined width of all columns is greater than the available space, then the last element will go down.

At the same time, the vertical margins streamlined elements do not collapse with the padding of adjacent elements, unlike regular block elements.

6. Cancel flow around elements

6.1. clear property

The clear property determines how the element that follows the floating element will be positioned. The property cancels the float on one or both sides of the element that is set by the float property. To prevent background or borders from being displayed under floating elements, use the (overflow: hidden;) rule.

6.2. Cleaning a stream with styles using the clearfix class and the :after pseudo-class

Suppose you have a block container for which the width and height are not specified. A floating block with specified dimensions is placed inside it.

.container ( padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; ) .floatbox ( float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; background: #ffffff ; border: 3px dashed #666666;

Rice. 4. “Collapse effect” of the container block

Solution to the problem:
We create the .clearfix class and, in combination with the :after pseudo-class, apply it to the container block.

Second option for clearing the stream:

Clearfix:after ( content: ""; display: table; clear: both; )
Rice. 5. Applying the “cleaning” method to a container block containing a floating element

6.3. An easy way to clean a stream

There is another trick to clean up the flow for an element containing floating elements, such as a horizontal bulleted list:

Ul ( margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; ) li ( float: left; width: calc(100% / 3 - 20px); height: 50px; margin- right: 20px; background: #ffffff; border: 3px dashed #666666; ) li:last-child (margin-right: 0;) Fig. 6. Cleaning up the horizontal list flow

I, like the author of the article, got to a lot of things in CSS at random, and missed even more. Especially time. And if I had immediately understood the principles of such things as positioning and float, then simple tasks would indeed have been simple from the very beginning. For this purpose, there are often not enough places where conflicts and anomalies of those programming languages that we are suddenly not taught since childhood are explained to us in our fingers. Well, they are not clear to us on an intuitive level, so what. Yes, and helps are not always read.

If you have the same story, then this is your reading for the evening.

One of the revelations that came to me after reading it was an understanding of how positioning works, in particular the difference between absolute and relative (absolute, relative). If you read to the end, you will know exactly when and how each one works. Everything is presented here using examples of lists and pictures.

Five positioning values

In CSS we have a list of five position values for div block elements:

Static - static.
Relative - relative.
Inherit - inherited.
Fixed - fixed.
Absolute - absolute.

Let's clear the road a little by removing inherit, simply because this positioning property does not need additional parsing. It tells the element to inherit the properties of its parent and that’s it. And in older versions of Internet Explorer it is not supported at all.

By default, positioning is set to static. Any element with static positioning will be where it is expected, being entirely dependent on the structure of the HTML.

Now fixed. This is such an anchor. When equipped with this value, the elements will remain where we place them and will not budge even when scrolled. This is often used to freeze navigation sidebars, which is terrible for content.

So, we have figured out the three positioning values and can consider them understandable. Simply because their functionality has no repetitions or variations. Interesting things remain - absolute And relative. Let's look at them individually and then at how they can be used together. And also what interesting results this can give.

Absolute positioning

Absolute positioning allows you to pull an object out of the normal flow of the document and place it at a specific point on the page. Let's create a simple list - unordered list.

FOUR

As we know, its items are already in the static value, automatically. This means that they flow in the flow of other elements of the document where they are placed according to its html structure. Now let's see what happens if you assign one of the list items absolute with zero coordinates.

>ul li:nth-child(4)(
position:absolute;
left:0; top:0;)

As you can see, it is thrown out of the general flow and placed in the upper left corner of the browser window. Note that an absolutely positioned element does not care whether there is another one in that place or not. It will still be placed according to the coordinates.

So, we need absolute positioning when we need to place an element exactly in the place on the screen where we want to see it. Accordingly, its position is measured by indents at the top, right, bottom and left of the window border.

For example, let’s place the same fourth list item with an indentation of twenty pixels on the left and twenty on top.

ul li:nth-child(4)(
position:absolute;
left: 20 px; top: 20 px;)

Moved a little down and to the right. And in order to confirm what has been said that an element with absolute positioning makes no difference to the location of others, we will give it such coordinates that will provide a uniform collision.

ul li:nth-child(4)(
position:absolute;
left: 60 px; top: 80 px;)

In conclusion, let us note the behavior of the remaining items on the list. When the fourth is removed from the stream, the rest are automatically aligned in the queue as if it were not there: the third is immediately followed by the fifth. Let's remember this and then use it to our advantage.

Relative positioning

Relative positioning works in the same way as absolute positioning—by giving an object its position using the coordinates top, right, bottom, and left. The only difference is the starting point: the position of the zero coordinate point. For absolute positioning, it was the edge of the browser screen. And for the relative?

Let's see:

ul li:nth-child(4)(
position: relative;
left: 0 px; top: 0 px;)

FOUR

How so? The fourth point remained in its place in the flow of elements. This is because the starting point for its coordinates is now not the edge of the browser window, but the element preceding it in the stream. He is also his parent.

Now, if we change the position of our experimental subject by twenty pixels, we will clearly evaluate the result of such a relationship.

ul li:nth-child(4)(
position: relative;
left: 20 px; top: 20 px;)

This extreme can be useful in real situations. For example, when we don’t want to throw out an element, but want to play with placing it on others. Note that relative positioning does not care about the bottom elements in the same way that absolute positioning does. But here they no longer take the place of those who left.

Putting it all together

Now that we have learned the basic rules for the behavior of HTML elements with absolute and relative positioning via CSS, let's create a full-fledged and clear example the work of this whole thing.

HTML

Let’s start by creating an HTML block of the “photo” class and immediately put a 200x200 pixel image into it.

Now it's time to move on to editing our CSS.

Basic CSS

First, let's change the background to dark. Then we’ll add basic styles to the photo: we’ll give it a frame and add shadows.

body ( background: #69C; )

Photo (
border: 5px solid white;
height: 200px; width: 200px;
margin: 50px auto;

/*difficult but cool shadows*/
-webkit-

box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Well, in general, here is our picture. Nothing special, but the training ground has been created.

Hanging a strip of tape

Let's put it this way: we want to create the impression that the photos are stuck to the wall with pieces of tape. To do this, we need to show what we have already learned and add a pseudo-element.

First, to create our film, we use the “before” pseudo-element “:before”. Its CSS settings will tell the tape to be twenty pixels high and one hundred pixels long. Moreover, with a white background, which is assigned an opacity of fifty percent, it’s film. Well, tenya, where would we be without her?

Photo:before (
content: "scotch";
height: 20px;
width: 100px;

}

Yes, here the film won’t stick to anything except itself...

It's obvious that we have problems with the positioning of the pseudo-element. Let's try to correct the situation using relative positioning.

Photo:before (
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position: relative;
top: 0 px; left: 0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Great. What effect...

As you can see, we have not solved the problem. Well, since relative positioning didn't work, let's go to opposite direction and let's try the absolute.

Photo:before (
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position: absolute;
top: 0 px; left: 0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

But this is closer to the topic.

Finally, the tape took the ordered form. But for now he is bored in some corner. A change in coordinates immediately suggests itself in order to move it to where we need it. But this is not a solution: the tape will stand at a certain point and begin to move along with the change in screen size.

Well, we tried both relative and absolute for positioning. But we are not yet satisfied with either one or the other as a solution.

What's next? And for example, the story about the absolute positioning of elements is not complete. You see, the top left corner of the screen is not always the zero coordinate point for an absolutely positioned element. Instead, our "absolute" pseudo-element will be oriented by to the first non-static ancestor. IN in this case- from the photo.

What do we get from this? A lot: we can use absolute positioning for tape. But before that, we must change something about his parent, about the photo. And since we don’t want the tape to move arbitrarily across the photo depending on the screen resolution, we’ll apply relative positioning to it.

Photo (
border: 5px solid white;
height: 200px;
width: 200px;
margin: 50px auto;
position: relative;

-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Photo:before (
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position: absolute;
top: 0 px; left: 0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

So, a pseudo-element with absolute positioning chose the upper left corner of the first of the non-static ancestors as the reference point for its coordinates. Namely, the angle of the photo exactly matches this description. So the tape will always be stuck to this corner, even if the size of the browser window changes.

Now that we have found the starting point, we can move the tape to the location we need by adjusting the left and top values. Note the negative value for the top point. Looking at the result, you will understand why. The left value is set to center the tape horizontally. Someone “Instant calculator” will clearly show how this is calculated.

Photo:before (
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position: absolute;
top: -15 px; left: 50 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

As we can see from the final picture, the combination of absolute and relative positioning gave us exactly what we needed to implement the intended effect and to understand how these two properties work.

Also check out Tinkerbean. In essence, this is a useful generator of codes for various effects.

Conclusion

Placing block elements can be a really challenging task without mastering the basic concepts of it. However, you need to keep only three things in mind in order to apply and combine their parameters in time.

The first is that relative positioning allows you to align yourself with a specific starting point. The second is that you can also configure relative to the first non-static ancestor, and not just the edge of the browser window, as happens with the value "position: none". And finally: neither the relative nor absolute positioning of an object affects the static and fixed objects surrounding it. Let's remember from the beginning of the article: absolutely positioned elements are removed from the flow, and relative ones take other people's positions.

Notes

Stale mobile phones and tablets do not perceive the positioning parameter well "fixed". Or rather, they don’t perceive it. The menus to which it is assigned slide across the screen along with the content as if they were "static". With the advent of iOS 5+, everything returned to normal, but not before.
The way everything written here was perceived, for example, by the seventh Internet Explorer— I don’t even want to discuss it. There was even less desire to think about how to hack CSS for it. Therefore, for the ghoul, I made screenshots of all the beauty and coded them in HTML with constructs like:

Сюда тупо скрин для Эксплорера.

And here is the full code for normal browsers.

So, if you’re not too lazy to post your solutions purely using CSS, then comments are at your service. Let's save the world.

Hello, dear readers of the blog site! It's time to add new ones useful materials and today we will get acquainted with how you can diversify the placement of various elements on the page by using the positioning property position with various parameters(static, relative, absolute, fixed).

Also, within the framework of the topic discussed above, we will consider how you can set one or another indentation to the right, left, up or down by using the corresponding properties left, right, top and bottom by assigning them the required numeric values.

Let me remind you that we can consider any web page as ordered. They determine the appearance of a particular element, but their location is dictated by a set of rules for cascading style sheets, which ultimately create a complete picture.

Determining element position and normal positioning (position static)

For property position has four values (static | relative | absolute | fixed), which determine the positioning method. As you probably know, the parameters of almost all CSS rules can be gleaned from the official W3 specification page, where full set properties and their values, including position:

Positioning is the location of an element in a coordinate system. Based on the values of the position property, four types of positioning can be distinguished: normal, absolute, relative, and fixed.

Using position and the ones I mentioned above left, right, top, bottom (indents respectively left, right, up, down) you can adjust the position of elements relative to each other, fix them in a certain place, or even superimpose one element on another.

Moreover, positioning can be controlled through scripts. This makes it possible to add dynamics to any element, as well as create animation and other effects.

If position is missing or is set to static, the element is rendered normally as part of the HTML flow. That is, all the components of the web page are displayed in the sequence that is present in source code pages.

To summarize, I note that values other than static allow you to change the standard arrangement of web elements on the page, which is very important in light of solving non-trivial layout problems. By the way, another tool that can change the usual order is with which you can create floating elements.

Position absolute

So, let's continue the analysis technical nuances absolute positioning, which is determined by the absolute parameter of the position property:

Position: absolute

It is important to understand that in this case the element will not be displayed on the standard flow. Accordingly, we have the opportunity to determine its location in the absolute coordinate system by setting indents from the edges of the browser window using left, right, top, bottom:

Here A, B, C and D are the numerical values of the indents. Now let's look at the features of the absolute value: specific example. Let's take 2 with the corresponding ones, to which we will assign the parameters (background color), width (width) and height (height). For simplicity, we will use , which is implemented using the style attribute.

Unlike linked styles, which are the most optimal in practice, this method involves placing CSS rules not in a separate file, but in the form of STYLE attribute values assigned to the desired tag. At the same time, for the purity of the experiment, we will not add position absolute for now:

Positioning HTML Elements

I already said a little higher that the absence of a default position is equivalent to the fact that the static parameter is specified for this property. That is, all elements are displayed in the usual sequence. Accordingly, in our case, the containers will be arranged in order (in the standard HTML stream):

Let me remind you that there is a rule for organizing and optimizing cascading style sheets in CSS: child elements properties of parents. Therefore, in this case, block tags occupy a position with zero padding and within the parent element.

What happened? After applying absolute positioning to specific element all other blocks of the web page stop “noticing” it and behave as if it does not exist. Moreover, we have not yet indicated the offset values using left, right, top and (or) bottom.

And in this case, after applying the absolute parameter to it, the web element remains in place, while its neighbor (in our example, the bottom colored block) moves up. As a result, one element is superimposed on another. Let's now try to specify the left margin for an absolutely positioned web element left:0, as a result we get this:

So, if you specify a zero value for the padding, then the web element with the absolute positioning parameter will go beyond the parent and stick to the edge of the browser window. Depending on the property set (left, right, top, bottom) this will be the left, right, top or bottom limit.

Moreover, it should be noted that left has an advantage over right, and top over bottom. If they conflict with each other, then the values of right and bottom are ignored, respectively. Let's move on. Next step Let's write a positive value for the left of the top container:

In this case, there will be an offset to the right from the left edge of the viewport, which is defined by the tag HTML document. Let's systematize and note point by point some features of the behavior of a web element when assigning it an absolute position:

If the block dimensions are not explicitly specified by width and height, then they will correspond to the content dimensions, including border and padding values;
A web element will not change its position if it does not have left, right, top or bottom values specified;
As already said, left has more high priority before right, and top before bottom;
If you assign a negative left or top value to an element, the block will go outside the viewport. The scroll bar will not appear. This nuance can be used to remove a web element from visibility;
If left is specified with a value greater than the width of the viewport or if right is specified as a negative value, then horizontal scrolling. The same goes for the pair top and bottom;
The width of an absolute positioned block is formed using left and right, however, only when width is not specified. Similarly, the height of an element is formed using top, bottom and height;
A web element with the absolute parameter moves simultaneously with the page when it is scrolled

I think I've sorted everything out regarding absolute positioning and you can determine for yourself what practical use elements with this property may have. However, as information, I will say that using the position property with the absolute value, you can create blocks with frames by adding an overflow rule with the auto parameter. There is also the option to get tooltips for photos or images.

Position relative

If an element with a position property that is assigned the relative parameter is set to left, right, top, or bottom, it will change its location relative to its original position. Moreover, a positive left value moves the web element to the right of its left border, and a negative value moves the web element to the left. Similar shifts occur when applying the top property, only in the vertical plane (in the case of a positive value down, negative - up):

For an example that will help to clearly demonstrate the effect of this type of position property, let’s take two containers, one of which will be moved to the left using the float:left property, and the text content of the second container will flow around this block. For clarity, let’s give these elements a background, dimensions using width and height, as well as the necessary margins using the margin property:

Text...

It will look like this:

Now we add position relative to the CSS rule for the first block, as well as offsets to the right (left) and down (top) so that the relative positioning produces the result:

Text...

As a result, the resulting look will be like this:

As you can see, the block has shifted along given parameters. However, the adjacent element did not react to this and the text still flows around the moved container as if it remained in its original place.

With the help of the provided example, I think it is clear how relative positioning works, however, practical application in pure form it's hard for him to find. From this point of view, the option of interaction between the absolute and relative parameters is much more in demand, which we will discuss below.

Using position absolute and relative together

Now let’s consider what results can be achieved by using two types of positioning in combination. If you assign the value relative to the parent element and absolute to the child element, then the coordinate system will be replaced and the location of the child web element will be determined relative to its parent:

As an example of the practical use of this combination of two types of positioning, I’ll give you my blog, where I recently implemented the overlay of a title and description on the header image. Initially the picture looked like this:

To implement the task, I did the following. First, I wrote in the STYLE.CSS of my theme the relative position property for the “site-header” class of the parent HEADER tag:

Also, for correct output, I had to determine the width of the block with the “site-description” class by specifying the width value:

Then, for the “site-branding” class of the child container DIV, I specified absolute positioning and specified left and top margins, which will determine the location of the element in this case not in absolute terms (in relation to the browser window), but relative to the location of the parent.

It was also necessary to remove the “text-align:center” property from the CSS ruleset for this tag in order to align the title and description text to the left. As a result of this interaction of relative and absolute positioning, the problem was solved and required text in the form of a blog title and description was superimposed on the header image:

In addition to the example I proposed, using the relation relative absolute can be implemented in general case such tasks that involve the appearance and disappearance of certain web elements. Moreover, in this case they will not interfere with the correct display of the rest components web pages.

A special case could be, for example, creating a drop-down menu on a website. It works like this. If you move the mouse cursor to the main menu item, an absolutely positioned block appears, made on the basis standard HTML. Its appearance is ensured by the fact that the relative parameter of the position property is assigned to the corresponding tag.

position fixed

Well, the last parameter of the position property helps to fix the necessary web elements on the page. In principle, this type of positioning is very similar to absolute positioning, with the only difference being that an element with a fixed value is attached to a specific area on the screen in the browser window using left, right, top, bottom. It stays in place even when you scroll the page.

A very illustrative example would be material about s using position fixed, you can read about it by going to the page using the link provided. I recommend that you familiarize yourself with this material, even if you do not plan to implement such a navigation bar on your web resource, since this example is very illustrative and helps to understand the essence of fixed positioning.

In addition to implementing the floating menu, position fixed is used when creating various types headers, tabs, images. In a word, to fix those blocks on a web page that are most important from the point of view of improving the behavioral characteristics of users, increasing the conversion of a commercial project, etc.

The publication has come to its logical conclusion. In the next article, I plan to touch on the nuances of using the property, the values of which affect the location of positioned blocks on a web page. In fact, this will be a continuation of today's material. In conclusion, I would like to remind you that you can note the efforts of the author by clicking on the social buttons just below, and express your opinion about the usefulness of the information offered in the comments.