In HTML, all elements can be divided into block and lowercase. Block elements are usually represented as rectangular areas with some information. With their help, the page grid is built. Such elements occupy all the space available to them in width, and before and after them usually there is a line break. Blocks can be indented, horizontal and vertical sizes.
Features of block elements
Block tags include tags that highlight a large amount of textual information: <div>, <form>, <p>, <h1>, <h2>, <ul>. The <div> tag is often used in the layout of modern sites to create grids and simply means some kind of block or container. It is permissible to enclose other tags in it, which is not possible with all block elements, therefore it is convenient to use <div>. Blocks are usually located one above the other and are not inserted into lowercase elements. HTML is text inline elements, and CSS is used to style it.
For a given width of content, the total width of the block is the sum of the right and left indentation, margins, borders, and width. At a given height - from the upper and lower indentation, margins, borders and heights. Text in block elements is left-aligned by default. If in one of them there are inline elements along with block ones, then an anonymous block is created around the lowercase elements. The default style will be applied to it. He will also inherit the given style assigned to his parent.
Document flow
A stream refers to the display order of page elements, determined by the properties specified in CSS. In this case, by default, the blocks are arranged from top to bottom, and line tags with a lack of space are transferred to a new line and are arranged from top to bottom and from left to right. The location of the element on the page depends on its place in the code: the higher it is, the earlier it is. Each of the block elements looks like a rectangle that repels neighboring ones. You can change this behavior using special properties. Aligning certain blocks in the center or sides of the container in CSS is called positioning.
Element positioning
The location of the blocks can be controlled using absolute and relative positioning. Positioning is used to set large sections of a page in a specific place to create complex interfaces, pop-ups, and decorative elements. The main property used to position blocks in CSS is position. It has four main properties:
- relative;
- absolute;
- fixed;
- static
With their help, you can switch the layout modes by setting one of four parameters: top, right, bottom or left. There is also a property for arranging layers - z-index. Positioning with the static property is usually not used, since it indicates the default location of blocks. Therefore, the use of any parameters does not affect it in any way. The following three properties are used for layout: relative, absolute, fixed.
Relative positioning
The relative positioning of blocks in CSS, that is, the position: relative property, means that the element can be moved and its original location changed. Such a block still remains in the stream. In fact, it is not he who is shifted, but his copy. Property values are set to precisely indicate how much the block will shift in one direction or another. They are measured most often in pixels. But it is permissible to use other units.
Using properties for relative positioning
The top property shifts the copy of a specific block up or down by the number of pixels specified in the property. When using it, the elements located lower or higher remain in their places, since in fact the displaced block also does not move anywhere.
The bottom property shifts the block in the opposite direction to the top property. A positive value helps to shift it up, and a negative value - down. The right and left properties move the element left and right, respectively. By combining them all, you can set the block to the exact location on the page, shifting it along the vertical and horizontal axis of coordinates. If you increase the indentation, they will be calculated not from the edge of the block itself, but from its copy shifted towards the side.
Absolute positioning
The absolute positioning of blocks in CSS is set by the absolute value of the position property. An element that is absolutely positioned falls out of the document stream, and its place is taken by neighboring blocks. The width of such an element is stretched depending on its contents, and you can shift it by setting certain values to the top, left, right, bottom properties. Absolute block positioning in CSS is useful for headings. But position: absolute works not only for block, but also for inline elements.
Center alignment of items
A positioned absolutely line item will behave exactly like a line item. Therefore, using positioning, you can control in CSS and text. You can apply some new properties to it, for example, change the height and width. CSS uses a combination of several properties to center and align vertically. Controls the vertical alignment of the top property. If you want to center the block in CSS, the main container should be relatively positioned, and the aligned element should be absolutely positioned. The container needs to set the top property: 50%, and to move the element half its own height, use the translate property with a value of “0, -50%”. Absolutely positioned elements can be distinguished into a new type, since they apply properties that are not available for other types of positioning.
Positioning relative to the upper left corner of the browser
The left, top, right, and bottom properties with absolutely and relatively positioned elements work differently. For relative elements, these properties specify an offset relative to where the element is located. Absolutely sponsored take place relative to a certain coordinate system, tied to the size of the browser window. The starting points of this system are the corners of the window. When using the left property, the indent will be counted from the left side of the browser, but the scroll bar will not occur. The top property, when absolutely positioned, sets the indent from the top of the browser to the top of the element to which it is applied. By combining both properties, the element can be moved relative to the upper left corner of the browser.
Positioning relative to the upper right corner of the browser
Similarly, using the right and top properties, you can press an element to the right side of the browser window and change its vertical position, shifting to the upper right corner. If the value of the right property is negative, the block will move outside the window border. After that, a scroll bar should appear. To move an element down, use the bottom property. It sets the indent from the bottom edge of the browser window to the bottom of the block. If its value is negative, a scrollbar also appears, since the element is shifted beyond the lower border of the browser window.
Coordinate system with absolute positioning
By default, all elements that are set to absolute positioning are tied to one coordinate system - the browser window. But it can be changed by setting relative positioning for any parent element. Then the child block will change its location depending on the parent. If among the parent elements there will be several with relative positioning, then the countdown is carried out from the nearest of them. In this case, the default positioning will be from what is specified in the body tag.
Reference point for an absolutely positioned element
Before the element was given absolute positioning, it was in some place called an implicit reference point. If such a block is not set properties, it will not budge. You can move it if you set the margin property. It will work similarly to positioning properties. If you do not define the value of the left property and all the others, then it will be equal to auto. Also, using auto, you can return elements to their original places.
Fixed positioning
Another value is fixed. The position property fixes an element to a specific place. Fixed positioning is often used to create menus in CSS. It looks like absolute, but a fixed block drops out of the stream. Even when scrolling the page, such an element will remain in its place, so it is convenient to use it to create menus in CSS. The reference point will be attached to the browser window. If there are several positioned blocks, the z-index property is used to arrange them. Using it, you can overlap relative blocks with absolute blocks if you give them the corresponding index, expressed as an integer. The larger it is, the higher the block will be.