A block element in HTML is one that, by default, spans the entire width of the parent element. The parent element can be another block element, or a browser window. A block element can be set to width and height using CSS properties. Positioning block elements is the process of positioning them within the browser window and relative to each other using the CSS position, left, top, right, and bottom properties. The CSS position property is intended to set one of the four available positioning types: static (default), absolute (absolute), fixed (fixed) and relative (relative). The rest of the CSS properties, namely left, top, right and bottom, are intended to set the distances relative to the left, top, right and bottom edges of the parent element. Also, block elements when setting certain properties can overlap each other, and this feature can be used on sites.
Default positioning (static)
If you did not specify position on a block element, or you specified static, which is the same, then the block elements are arranged in order. Moreover, the next block (for example: red) is located on a new line. Also, this positioning is not affected by setting the distances left, top, right and bottom.
Absolute positioning
In absolute positioning, the position of an element is set relative to the edges of the browser window using the distances given by the left, top, right, and bottom properties. If you specify the distances left and right at the same time, and they will contradict each other, then preference is given to left, the same applies to top and bottom, in which the top distance takes precedence. Absolute positioning is used very often in conjunction with relative positioning for design purposes, when it is necessary to place various elements relative to each other, it can also be used to create drop-down menus, site layout, etc.
Fixed positioning
Fixed positioning is different from other types of positioning and does not move with the content when scrolling the page. Fixed-positioned block elements are anchored using the left, top, right, and bottom properties to the edges of the browser window. Fixed positioning is used to create framed interfaces (the browser window is divided into several areas), a fixed menu, a fixed footer of the site and "permanent" blocks (list of links, social buttons, etc.).
Relative positioning
Relative positioning is specified by specifying the distances left, top, right, and bottom relative to its current position.
However, such a block position can also be created using the margin property.
Relative positioning is not fun to use on its own, it is mostly used in conjunction with absolute positioning.
Consider the options:
Positioning in CSS seems pretty straightforward. Indicate which block and where should be located. However, everything is not as simple as it seems at first glance. There are a few things that can be confusing for newbies. You can get a lot more value out of positioning if you understand in detail how it works.
Box model in CSS and positioning types.
Before you start, I advise you to read the article Box Model in CSS. In a nutshell: each element in html is a rectangle for which you can specify the amount of padding and padding, as well as the border that separates them.
Positioning schemes determine where this rectangle should be positioned, as well as how it should affect the elements around it.
The position property in CSS can take five values:
- absolute
- relative
- fixed
- static
- inherit
The static value is used by default. Any element with static positioning is in the general flow of the document. The rules for placing it are determined by the Box model. For such elements, the top, right, bottom and left properties will be ignored. In order to use these properties, the positioning of an element must be absolute, relative, or fixed.
The inherit value, as with all other CSS properties, is used to force the element to use the same value as the parent element.
Absolute positioning
Absolute positioning removes the element from the general flow of the document. As for the elements around, then in this case they simply ignore the desired one, as if the display: none property was set to it; ... If you don't want the space for such an element to be filled with other elements, then you need to come up with a different approach.
You set the position of an absolute positioned element using the top, left, right and bottom properties. You just need to specify two of them, top or bottom and left or right. If no properties are specified, then 0 is set for the top-left pair.
The key to absolute positioning is understanding what the starting point is. If the top property is set to 20px, then where they should be counted from.
The answer is simple: such elements are positioned relative to the closest parent element that is positioned other than static. If there is no such element, then the element is positioned relative to the main document. That is, when setting absolute positioning, CSS tells the browser to look at the parent element and, if its positioning is not static, then it is necessary to align the current element relative to it.
Relative positioning.
Relatively positioned elements are positioned based on their position, usually offset from their normal position. This is similar to adding padding to the element using the margin property. However, there is one significant difference: neighboring elements, in the case of using positioning, do not take into account this shift.
Imagine it this way: a certain image is shifted, and a "ghost" remains in its place, all elements are located relative to this "ghost". This allows us to stack elements on top of each other.
Thus, relative positioned elements are taken from the normal flow of the element, but still have an impact on the arrangement of adjacent elements, which behave so that the original element is still in the document flow.
In this case, we don't have to ask the question of what the element is positioned here. The answer is always: normal document flow. It looks a lot like adding padding to an element, but at the same time not affecting adjacent elements.
Fixed positioning
Fixed positioning acts like absolute positioning with minor differences.
First, a fixed-positioned element is always positioned relative to the browser window, ignoring parent elements.
The second difference comes from its name. Fixed elements are fixed on the page. They do not move when scrolling.
Z-index
The site page is two-dimensional. It has a width and a height. Z-index adds a third dimension, depth.
The higher the index, the higher the element is on the page. With the help of it, we can achieve that one element is located on top of another. By default, its value is zero. Negative values are also allowed.
In fact, z-index is much more complex than I describe it here, but this is a topic for a separate article. Now, the main thing to remember is the very idea of the third dimension and the fact that only positioned elements can use this property.
Positioning problems.
Let's take a look at a few common positioning problems and a few words about how to solve them.
- You cannot use the position property and the float property at the same time on the same element. Both of these properties affect the position of the element, so the last specified property will be used.
From comments:
You can use position: relative and float at the same time.
When position: absolute and float are specified at the same time, then not the last specified property is applied. In this case, regardless of the order of these styles, position: absolute is applied, and the final (or calculated) value of the float property is set to none, regardless of the initial value, i.e. ignored.
- Outside padding does not collapse on absolute positioned elements. Let's say there is a paragraph on the page with a 20px bottom margin. It is followed by a picture with a top margin of 30px. The distance between the image and the text will not be 50px (20px + 30px), but 30px (30px> 20px). This behavior is called collapsing margins. The two indents are combined into one. Absolutely positioned elements have no collapsed margins, so the result may not be what you expected.
- IE and z-index. In IE6, the selection of an element always happens at the top of the stack, regardless of its z-index, z-index of the surrounding elements.
IE6 and IE7 have another problem with z-index. IE looks at the parent element to determine which group of elements the top of the stack is in, other browsers use the global context. For example:
We expect the paragraph to be taller than the image because its z-index is larger. However, IE6 and IE7 put the picture above because they are on different document stacks. One stack for the div, one for the img, and the image has a higher z-index than the div.
Conclusion
The position property sets the behavior of positioning an element according to one of the positioning schemes. Available property values are absolute, relative, fixed, static (default), and inherit.
Positioning schemes determine the rules for placing an element on a web page, as well as the effect on the arrangement of neighboring elements.
The z-index property can only be applied to elements with the position property set. It adds a third dimension to the page and sets the stacking order of the elements.
The position property seems easy to read, but it works a little differently than it appears at first glance. Often developers think that they need relative positioning, although most likely they should use absolute. Basically, during layout, the float property is used, and the position property is needed for elements that you want to "rip" out of the general flow of the document.
With CSS positioning, you can position an element exactly where you want it on the page. Together with floats (see Lesson 13), positioning gives you a lot of room to create precise and sophisticated designs.
In this tutorial, we will discuss the following:
CSS Positioning Principles
Let's imagine the browser window as a coordinate system:
The principles of CSS positioning are that you can position a box anywhere in the coordinate system.
Let's say we want to position a heading. Using the boxed model (see Lesson 9), the title looks like this:
If we want to position it 100px from the top of the document and 200px to the left, we have to enter the following CSS:
H1 (position: absolute; top: 100px; left: 200px; }
Here's the result:
As you can see, CSS Positioning is a very precise technique when placing elements. This is much easier than using tables, transparent images, or anything like that.
Absolute positioning
An absolutely positioned element does not receive any space to the document. This means that after positioning, it does not leave any empty space behind.
For absolute positioning of an element, the position property must be absolute... You can use values left, right, top and bottom to place the box.
As an example of absolute positioning, we will place 4 boxes at the corners of the document:
# box1 ( position: absolute; top: 50px; left: 50px; ) # box2 ( position: absolute; top: 50px; right: 50px; ) # box3 ( position: absolute; bottom: 50px; right: 50px; ) # box4 ( position: absolute; bottom: 50px; left: 50px; )
Relative positioning
To position an element relatively, set the position property to relative... The difference between relative absolute positioning is how positioning is calculated.
The position of the element to be positioned relative to calculated relative to its original position in the document... This means that you move an element to the right, left, up, or down. Thus, the element still takes up space in the document after positioning.
As an example of relative positioning, let's try to position three images relative to their original position on the page. Note that the pictures left white space after offset at their original positions in the document.
Are you still confused about how absolute positioning works in CSS and you lose elements on the screen? Let's understand this magic.
Introduction to positioning
When you set position: absolute, it is not the element itself that comes to the fore, but its parent container, as positioning is relative to it in CSS. The tricky part is that it is not always the immediate parent of the element.
Consider a code with four divas nested inside each other like a nesting doll.
< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body > |
The boxes box-1, box-2 and box-3 are centered for beauty using the margin: auto properties and the flex CSS properties. The box-4 block remains in its default position in the document flow.
body (display: flex;) .box-1, .box-2, .box-3 (display: flex; margin: auto;)
body ( Display: flex; Box-1, Box-2, Box-3 ( Display: flex; Margin: auto; |
All 4 elements have default positioning. On the this moment the layout looks like this:
.box-4 no positioning What are we positioning against?
To position itself, an element needs to know two things:
- which parent will be the starting point;
- the amount of offset relative to the reference point (top, bottom, right or left).
If you define position: absolute for box-4, that element will leave the normal flow of the document. But now it remains in its place, since the coordinates of the offset are not specified. If no element width is defined in CSS, it will be equal to the width of its content (plus padding and border).
.box-4 with absolute positioning without offset Now let's add the properties top: 0 and left: 0. The element must determine which parent container will be the reference point for these coordinates. It becomes the closest element with a non-static position (most often position: relative). box-4 starts interrogating its ancestors one by one. Neither box-3, nor box-2, nor box-1 will work as they have default CSS positioning (unset).
If no positioned ancestor is found, the element is positioned relative to the document body:
.box-4 with absolute positioning. Parent elements without positioning If we set position: relative to the element box-1, it will be the starting point:
.box-4 with absolute positioning. .box-1 with relative positioning An absolutely positioned element is positioned relative to its closest positioned ancestor.
Once the starting point is found, everything above it in the DOM tree ceases to matter.
If we also set position: relative for box-2, then box-4 will be positioned relative to it, because this ancestor is closer.
.box-4 with absolute positioning. .box-2 with relative positioning Likewise for the box-3 container:
These days, web developers can build complex layouts for web pages using various CSS techniques. Some of these techniques have a long history (floats), others (flexbox) have gained popularity in recent years.
In this article, we'll take a close look at some of the little-known things about CSS positioning.
Before we start, let's take a quick look at the basics. different types positioning.
Overview of available positioning methods
The position CSS property determines the type of positioning of an element.
Positioning options
static is the default positioning property value. We report that this element does not use positioning - positioning is applied only if you set a positioning type other than the default.
To do this, set the position property to one of the following values:
- relative
- absolute
- fixed
- sticky
And only after setting the positioning, you can use the properties that offset the element:
- right
- bottom
- The initial value of these properties is - keyword auto.
It should be borne in mind that if an element has the position property set to absolute or fixed, then it is an absolutely positioned element. Also, for positioned elements, the z-index property begins to work, which determines the order of imposition.
Differences between basic positioning methods
Now, let's quickly look at three basic differences between the available positioning types:
- absolutely positioned elements are completely removed from the flow, and their nearest neighbors take their place.
- relatively positioned (relative) and glued (sticky) keep their place in the stream and their nearest neighbors do not occupy it. However, the padding of these elements does not take up space, but is completely ignored by other elements and this can result in overlapping elements.
- fixed elements (and fixed positioning is a kind of absolute) are always positioned relative to the viewport (ignoring ancestor positioning), while glued elements are positioned relative to the scrolling nearest ancestor (overflow: auto). And only in the absence of such ancestors, they are positioned relative to the visibility zone.
This can be seen in more detail in the demo:
Note: Positioning "glue elements" is still an experimental technology with limited browser support. Of course, if you want, you can use the polyfill to add this functionality to the browser, but given its low prevalence, this property will not be discussed in this article.
Positioning elements with absolute positioning type
I'm sure most people know how absolute positioning works. However, a lot of things about it can be confusing for beginners.
So I decided to start with it when describing little-known positioning features.
So, an absolutely positioned element is offset from its closest positioned ancestor. Of course, this works if any of the ancestors has a position other than static - if the element has no positioned ancestors, it is offset from the viewport.
This is demonstrated by the following example:
In this demo, the green box is initially positioned with absolutely zero margins bottom: 0 and left: 0, its ancestor (red box) was not positioned at all.
However, we have relatively positioned the outer wrapper (a jumbotron element). Notice how the positioning of the green box changes when the positioning type of its ancestors changes.
Absolutely positioned elements ignore the float property
If we apply absolute or fixed positioning to a floated element, the float property will be set to none. On the other hand, if we set relative positioning, the element will remain floating.
Take a look at the corresponding demo:
In this example, we define two different elements to float to the right. Note that when the red box becomes absolutely positioned, it ignores the float value, while the relatively positioned green box retains the float value.
Absolutely positioned inline elements become block-level
An inline element with absolute or fixed positioning takes on the properties of a block element. For details on converting inline elements to block elements, see the table.
In this case, we have created two different elements. The first (green box) is a block element, and the second (red box) is an inline element. Initially, only the green block is visible.
The red box is not visible because its width and height properties only work with block and inline elements, and since it has no content, it has no dimensions.
When the red block is set to absolute or fixed positioning, it becomes block and the block sizes specified in it take effect.
Absolutely positioned elements do not have collapsed margins
By default, when two vertical margins touch, they are merged into one equal to the maximum of them. This is called collapsing margins.
Absolutely positioned elements behave similarly to floating elements - their padding is not merged with adjacent ones.
In this demo, the element is set to an indent of 20 pixels. Its padding collapses with the parent element's padding, which is also 20 pixels. As you can see, only with absolute positioning, no collapse occurs.
But how can we prevent padding from collapsing? We need to put some kind of separator between them.
It can be padding or border and can be applied to both parent and child elements. Another option is to add a clearfix to the parent element.
Positioning elements with pixels and percentages
Have you ever used percentages instead of pixels to position elements? If the answer is yes, then you know that the offset of the element depends on the selected units of measure (pixels or percent).
This is a little embarrassing, right? So first, let's see what the spec says about offset as a percentage:
Offset as a percentage of the width (for left and right) or height (top or bottom) of the parent box. For glued elements, the offset is calculated as a percentage of the width (for left and right) or height (top or bottom) of the flow. Negative values are allowed.
As mentioned, when you set the offset as a percentage, the position of the element depends on the width and height of its parent.
The demo shows this difference:
This example uses pixels and percentages for offset. Of course, when you set the offset in pixels, the element is shifted where it needs to be.
And if we choose a percentage for the offset, the result will depend on the size of the parent element. Here is a visualization showing how the new position is calculated:
Note: as you probably know, the transform property (along with various translate functions) also allows you to change the position of an element. But in this case, when using percentages, the calculation will be based on the size of the element itself, not its parent.
Conclusion
I hope this article helped you better understand positioning in CSS and clarified the underlying complexities.