Positioning is one of the key concepts in block layout. Having dealt with it, a lot will become clear to you, and layout will turn from shamanism into a meaningful process. So, this article will focus on CSS properties. position And float.
1 position: static
By default, all elements on the page are positioned statically (position: static), which means that the element is not positioned and appears in the document in its usual place, that is, in the same order as in the html markup.
There is no need to specifically assign this property to any element, unless you need to change a previously set position to default.
#content( position: static; )
2.position:relative
Relative positioning (position: relative) allows you to use the top, bottom, left, and right properties to position an element relative to where it would appear in normal positioning.
Let's move #content 20px down, and 40px to the left:
#content( position: relative; top: 20px; left: -40px; )
Notice that there is now an empty space where our #content block should have been. Following the #content block, the #footer block didn't move down because #content still has its place in the document even though we moved it.
At this stage, it may not seem like relative positioning is all that useful, but don't jump to conclusions, later in the article, you will learn what it can be used for.
3. position: absolute
With absolute positioning (position: absolute), the element is removed from the document and appears where you tell it to.
Let's, for example, move the #div-1a block to the top right corner of the page:
#div-1a ( position:absolute; top:0; right:0; width:200px; )
Note that this time, because the #div-1a block has been removed from the document, the remaining elements on the page are positioned differently: #div-1b, #div-1c, and #footer have moved up to the position of the removed block. And the #div-1a block itself is located exactly in the right, upper corner of the page.
Thus, we can position any element relative to the page, but this is not enough. Actually, we need to position #div-1a relative to the parent #content block. And at this point, relative positioning comes into play again.
4. position: fixed
Fixed positioning (position: fixed), is a subset of absolute positioning. Its only difference is that it is always in the visible area of the screen, and does not move while scrolling the page. In this respect, it is a bit like a fixed background image.
#div-1a ( position:fixed; top:0; right:0; width:200px; )
In IE with position: fixed, not everything is as smooth as we would like, but there is many ways bypass these restrictions.
5. position:relative + position:absolute
By giving the #content block relative positioning (position: relative), we can position any child elements relative to its borders. Let's place a #div-1a block in the top right corner of the #content block.
#content ( position:relative; ) #div-1a ( position:absolute; top:0; right:0; width:200px; )
6. Two columns
Armed with the knowledge from the previous steps, you can try making two columns using relative and absolute positioning.
#content ( position:relative; ) #div-1a ( position:absolute; top:0; right:0; width:200px; ) #div-1b ( position:absolute; top:0; left:0; width:200px ; )
One of the advantages of absolute positioning is the ability to place elements in an arbitrary order, regardless of how they are located in the markup. In the example above, the #div-1b block is placed before the #div-1a block.
And now you should have a question: “Where did the rest of the elements from our example go?”. They disappeared under absolutely located blocks. Fortunately, there is a way to fix this.
7. Two fixed height columns
One solution is to give a fixed height to the container containing the columns.
#content ( position:relative; height: 450px; ) #div-1a ( position:absolute; top:0; right:0; width:200px; ) #div-1b ( position:absolute; top:0; left:0 ;width:200px; )
The solution is not very suitable, since we never know in advance what size the text will be placed in columns, and what font will be used.
8.Float
For variable height columns, absolute positioning is not suitable, so let's look at another option.
By assigning a float to the block, we push it as far as possible to the right (or left) edge, and the text following the block will wrap around it. Usually this technique is used for pictures, but we will use it for a more complex task, since it is the only tool we have at our disposal.
#div-1a ( float:left; width:200px; )
9. Floating columns
If we assign float: left to the first block and then float: left to the second, each of the blocks will be pressed to the left edge, and we will get two columns, with a variable height.
#div-1a ( float:left; width:150px; ) #div-1b ( float:left; width:150px; )
Also, you can assign the opposite float value to the columns, in this case, they will be distributed along the edges of the container.
#div-1a ( float:right; width:150px; ) #div-1b ( float:left; width:150px; )
But now we have another problem - the columns go beyond the parent container, thereby breaking the entire layout. This is the most common problem for beginner layout designers, although it can be solved quite simply.
10. Clear float
Float cleaning can be done in two ways. If there is another block after the columns, it is enough to assign clear: both to it.
#div-1a ( float:left; width:190px; ) #div-1b ( float:left; width:190px; ) #div-1c ( clear:both; )
Or assign the property overflow: hidden to the parent container
#content ( overflow:hidden; )
Either way, the result will be the same.
Conclusion
Today, only basic positioning techniques were considered, and the simplest examples. Also, to help beginner layout designers, I always recommend a series of articles by Ivan Sagalaev, which at one time helped me a lot.
One of the best things about CSS is that styles give us the ability to position content and elements on a page in almost any way imaginable. This brings structure to our design and helps make the content more visual.
There are several different types of positioning in CSS, each of which has its own scope. In this chapter, we're going to take a look at a few different use cases - creating reusable layouts and unique positioning of disposable elements, as well as describing a few techniques for doing so.
Positioning via float
One way to position elements on a page is through the float property. This property is quite versatile and can be applied in many ways.
Essentially, the float property takes an element, removes it from the normal flow of the page, and positions it to the left or right of the parent element. All other elements on the page will wrap around such an element. For example, paragraphs will wrap around an image if the element has the float property is set.
When the float property is applied to multiple elements at the same time, it makes it possible to create a layout with floated elements next to or opposite each other, as shown in a multi-column layout.
The float property takes several values, the two most popular being left and right , which allow an element to be positioned to the left or right of its parent.
Img ( float: left; )
float in practice
Let's create a general page layout with a header at the top, two columns in the center, and a footer at the bottom. Ideally, this page should be marked up with elements
Layout demo without float
Here the elements
Section ( float: left; ) side ( float: right; )
For reference, floated elements are positioned at the edge of the parent element. If there is no parent, the floated element will be positioned at the edge of the page.
When we float an element, we remove it from the normal flow of the HTML document. This causes the width of that element to default to the width of its content. Sometimes, for example when we create columns for a reusable layout, this behavior is not desired. This can be fixed by adding a fixed value width property for each column. Additionally, to prevent floated elements from touching each other, resulting in the content of one element being next to another, we can use the margin property to set the space between elements.
Below we expand on the previous block of code by adding a margin and width for each column to better shape our desired result.
Section ( float: left; margin: 0 1.5%; width: 63%; ) aside ( float: right; margin: 0 1.5%; width: 30%; )
Layout demo with float
floats can change the display value of an element
For a floated element, it is also important to understand that the element is being removed from the normal flow of the page, and that the element's default display value may change. The float property relies on the element's display value being set to block and can change the element's default display value if it is not already rendered as a block element.
For example, an element whose display is set to inline , such as inline , ignores any height or width properties. However, if you specify a float for an inline element, the display value will change to block and then the element can already take on the height or width properties.
When we float an element, we need to be aware of how it affects the value of the display property.
For two columns you can float , one column as left and the other as right , but for multiple columns we'll have to change our approach. Say, for example, we would like to have a row of three columns between our elements
To arrange these three elements
Section ( float: left; margin: 0 1.5%; width: 30%; )
Here we have three columns, all with the same width and margin value, and with a float set to left .
Three-column layout demo with float
Cleanup and float content
The float property was originally designed to allow content to flow around images. An image can be floated and all content around that image naturally wraps around it. While this works great for images, the float property was not really intended to be used for layout and positioning purposes and thus comes with a few pitfalls.
One of these pitfalls is that sometimes the proper styles are not rendered on an element that is next to or parent of the floated element. When an element is floated, it is removed from the normal flow of the page and as a result, the styles of the elements around that floated element can be adversely affected.
Often the values of the margin and padding properties are misinterpreted, causing them to blend into the floated element. Other properties may also be affected.
Another mistake is that sometimes unwanted content will wrap around the float element. Removing an element from the document flow allows all elements around the floated element to bypass it and use any available space around the floated element, which is often undesirable.
In our previous two-column example, after we floated the elements
Layout demo without clearing the float
To prevent content from wrapping around floated elements, we need to clear the float and return the page to its normal flow. We'll look at how to clear floats and then take a look at their contents.
Clearing a float
Clearing a float is done with the clear property, which takes several different values: the most commonly used values are left , right , and both .
Div ( clear: left; )
The left value clears the left floats, while the right value clears the right floats. A value of both , however, will clear the left and right floats and is often the most ideal choice.
Returning to our previous example, if we use the clear property with a value of both on an element
Footer ( clear: both; )
Layout demo with float clearing
float content
Instead of clearing the float , another option is to set the contents of the float . The result is pretty much the same, but the float content really ensures that all of our styles will render properly.
To set the content to a float , the floated elements must be inside a parent element, it will act as a container, leaving the flow of the document completely normal outside of it. The styles for this parent element present the group class, as shown here:
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; )
There isn't much going on here, but basically all CSS does is clear all the floated elements inside the group element and return the document to normal flow.
More specifically, the ::before and ::after pseudo-elements, as discussed in Lesson 4, dynamically generate elements above and below an element with class group . These elements do not include any content and are displayed as table elements, similar to block elements. The dynamically generated element after the group element clears the float inside the group element, just like clear before. Finally, the group element also clears any floats that might appear before it, in case there is a left or right float. Also included here is a little trick that makes older browsers play nice.
There is more code here than the single clear: both command, but it can be quite useful.
Considering our two-column page layout, we could wrap
Group::before, .group::after ( content: ""; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; ) section ( float: left ; margin: 0 1.5%; width: 63%; ) aside ( float: right; margin: 0 1.5%; width: 30%; )
Layout demo with float content
The technique shown here is known as "clearfix" and is often found on other sites with the class name clearfix or cf. We chose to use the class name group because it represents a group of elements and better expresses the content.
When elements are floated it is important to watch how they affect the page flow and make sure the page flow is reset by clearing or through the float content as appropriate. Otherwise, float tracking can cause a lot of headaches, especially on pages that contain multiple rows, each with multiple columns.
On practice
Let's go back to the Styles Conference site and try out adding floats to some content.
- First things first, before applying float to any element, let's provide content for these floated elements by adding a clearfix to our CSS. In the main.css file, just below our grid styles, we'll add a clearfix under the group class name, as before. /* ====================================== Clearfix ======= ================================ */ .group::before, .group::after ( content: " "; display: table; ) .group::after ( clear: both; ) .group ( clear: both; *zoom: 1; )
Now that we can use float , let's set it to the main
inside the element as left and let the rest of the content in the header wrap around it to the right.To do this, add the logo class to the element
. Then, inside our CSS, let's add a new style section for the main heading. In this section, we will select an element with the logo class and set the float to left .
Styles Conference
/* ====================================== Main heading ====== ================================= */ .logo ( float: left; )While we're here, let's add a little more detail to our logo. Let's start with element placement
or a line break between the words "Styles" and "Conference" to force our logo text to span two lines.
In CSS, let's add a border to the top of our logo and some vertical padding to let the logo breathe freely.
styles
Conference
Logo ( border-top: 4px solid #648880; padding: 40px 0 22px 0; float: left; )
Since we made an element
floated, we want to set the content to a float . next of kin to is the element , so we'll add a group class to it. This will apply the clearfix styles we set earlier to it.
...
Element takes shape, so let's take a look at the element
Unlike the element , however, we are not going to apply the class directly to the floated element. This time we're going to add a class to the floated element's parent and use a unique CSS selector to select the element and then float it.
Let's start by adding the primary-footer class to the element
Now that the primary-footer class is set on the element
/* ====================================== Main basement ====== ================================= */ .primary-footer small ( float: left; ) To test - here we select an element , which must be inside an element with a class attribute value of primary-footer , such as our element
Finally, let's add a little padding to the top and bottom of the element.
Primary-footer ( padding-bottom: 44px; padding-top: 44px; )
To do this, add the logo class to the element
. Then, inside our CSS, let's add a new style section for the main heading. In this section, we will select an element with the logo class and set the float to left .
Styles Conference
/* ====================================== Main heading ====== ================================= */ .logo ( float: left; )While we're here, let's add a little more detail to our logo. Let's start with element placement
or a line break between the words "Styles" and "Conference" to force our logo text to span two lines.
In CSS, let's add a border to the top of our logo and some vertical padding to let the logo breathe freely.
styles
Conference
Logo ( border-top: 4px solid #648880; padding: 40px 0 22px 0; float: left; )
Since we made an element
floated, we want to set the content to a float . next of kin to is the element , so we'll add a group class to it. This will apply the clearfix styles we set earlier to it.
...
Element takes shape, so let's take a look at the element
Unlike the element , however, we are not going to apply the class directly to the floated element. This time we're going to add a class to the floated element's parent and use a unique CSS selector to select the element and then float it.
Let's start by adding the primary-footer class to the element
Now that the primary-footer class is set on the element
/* ====================================== Main basement ====== ================================= */ .primary-footer small ( float: left; ) To test - here we select an element , which must be inside an element with a class attribute value of primary-footer , such as our element
Finally, let's add a little padding to the top and bottom of the element.
Primary-footer ( padding-bottom: 44px; padding-top: 44px; )
Element
Unlike the element
Let's start by adding the primary-footer class to the element
Now that the primary-footer class is set on the element
/* ====================================== Main basement ====== ================================= */ .primary-footer small ( float: left; )To test - here we select an element , which must be inside an element with a class attribute value of primary-footer , such as our element
Finally, let's add a little padding to the top and bottom of the element.
Primary-footer ( padding-bottom: 44px; padding-top: 44px; )
With all these changes in the elements
Rice. 5.01. With multiple floats, elements
Positioning via inline-block
In addition to using float , another way we can position content is by using the display property in combination with the inline-block value. The inline-block method, as we'll discuss later, is primarily useful for page layout or for placing elements in a line next to each other.
Recall that the inline-block value for the display property draws elements into a line and allows them to take on all the properties of the box model, including height , width , padding , border , and margin . Using inline-block allows us to take full advantage of the box model without having to worry about clearing up any floats.
inline-block in practice
Let's take a look at our three-column example from the beginning. We'll start by keeping our HTML like this:
Now instead of float for our three elements
Section ( display: inline-block; margin: 0 1.5%; width: 30%; )
Unfortunately, this code alone is not enough to do the trick and the last element
Demonstration of inline-block elements with space
Removing space between inline-block elements
There are several methods for removing space between inline-block elements, and some are more complex than others. We're going to focus on two of the simplest methods, both of which happen inside HTML.
The first solution is to put each new element opening tag
Writing inline-block elements in this way ensures that there is no space between such elements in HTML. Therefore, the space will not appear when the page is rendered.
Demonstration of inline-block elements without spaces
Another method for removing space between inline-block elements is to open an HTML comment immediately after the element's closing tag. Then close the comment immediately before the opening tag of the next element. This allows inline elements to start and end on separate lines in HTML, and will "comment out" any potential space between elements. As a result, the code will look like this:
None of these options are perfect, but they are useful. I'm leaning towards using comments for better organization, but which option you choose is entirely up to you.
Create reusable layouts
When building a site, it's always best to write modular styles that can be reused elsewhere, and reusable layouts are at the top of the reusable code list. Layouts can be created with floats or inline-block elements, but which works best and why?
Whether floated or inline-block elements are better for page structure is open to debate. My approach is to use inline-block elements to create a grid or page layout, and then use floats when I want content to flow around that element (which is what floats were designed for when working with images). In general, I also find inline-block elements easier to work with.
However, use what works best for you. If you are more familiar with one approach than the other, then use it.
New CSS specifications are currently in the works - specifically the flex- and grid- properties - to help you decide how best to lay out your pages. Keep an eye out for these methods as they start to pop up.
On practice
With a solid understanding of reusable layouts, it's time to introduce one to our Styles Conference site.
For the Styles Conference website, we will create a three-column layout using inline-block elements. We'll do it this way to get three columns of the same width, or two columns with a total width divided between them as 2/3 for one and 1/3 for the other.
To begin with, we will create classes that define the width of these columns. We'll call these two classes col-1-3 for one-third and col-2-3 for two-thirds. In the Grid section of our main.css file, let's go ahead and define these classes and their corresponding widths.
Col-1-3 ( width: 33.33%; ) .col-2-3 ( width: 66.66%; )
We want both columns to be displayed as inline-block elements. We also need to make sure they are vertically aligned to the top of each column.
Let's create two new selectors that share display and vertical-align .
Col-1-3, .col-2-3 ( display: inline-block; vertical-align: top; )
Take a look at CSS again. We have created two class selectors col-1-3 and col-2-3 separated by a comma. A comma at the end of the first selector means that it is followed by another selector. The second selector is followed by an opening curly brace, which indicates that the style declaration is about to begin. With a comma separating selectors, we can bind one style to multiple selectors at the same time.
We want to put some space between the columns to help break up the content. This can be done by adding horizontal padding to each column.
This works well, however, when two columns are next to each other, the width of the space between them will be twice as wide as the space from the outer edge. To balance this out, we'll put all of our columns in a grid and add the same padding to it.
Let's use the grid class to define our grid and then give the same horizontal padding to the grid , col-1-3 and col-2-3 classes. With commas separating our selectors again, our CSS looks like this:
Grid, .col-1-3, .col-2-3 ( padding-left: 15px; padding-right: 15px; )
When we set horizontal padding we need to be careful. Remember, in the last tutorial we created a container with the container class centered on all of our content on the page with a width of 960 pixels. Right now, if we were to put a grid element inside a container element, their horizontal paddings would stack together and our columns would not display proportionally to the width of the rest of the page.
We will do this by breaking down the old container ruleset into the following:
Container, .grid ( margin: 0 auto; width: 960px; ) .container ( padding-left: 30px; padding-right: 30px; )
Now any element with class container or grid will be 960px wide and centered on the page. In addition, we've preserved the existing horizontal padding for any container element by moving it to a new, separate set of rules.
Okay, all the hard necessary part of setting up the grid is done. Now it's time to work with our HTML and see how these classes work.
We'll start with the teasers on the main page, in the index.html file, aligned in three columns. Teasers are currently wrapped with an element
...
... ... ...
And finally, since each of our columns is an inline-block element, we need to make sure we remove the white space between them. To do this, we will use comments and add some documentation to each section to better organize our code.
... ... ...
For verification, on line 3 we left a comment identifying the "Speakers" section that follows it. At the end of line 7, we open the comment right after the closing tag. Inside this comment, on line 9, we define the next section "Schedule". Then we close the comment at the beginning of line 11, just before the opening tag
We now have a reusable 3-column grid that supports different layouts using both 1/3 and 2/3 column widths. Our main page now contains three columns, separating all the teasers.
Rice. 5.02. The Styles Conference homepage now includes a three-column layout
Demo and source code
Below you can view the Styles Conference site in its current state, as well as download the current source code for the site.
Unique positioning of elements
Sooner or later everyone will want to precisely position an element, but floats or inline-block elements don't allow you to do this trick. Floated elements, which remove an element from the flow of the page, often produce undesirable results because the surrounding elements float around the floated element. Inline-block elements, unless we're creating columns, can be quite awkward when it comes to proper positioning. For situations like this, we can use the position property in conjunction with the box's offset properties.
The position property determines how the element is positioned on the page and whether it will be displayed in the normal flow of the document. It is used in conjunction with the box's offset properties - top , right , bottom , and left , which specify exactly where the element will be positioned by moving the element in different directions.
By default, each element has its position value set to static , which means that the element exists in the normal document flow and does not take any properties to offset it. The static value is most often overridden by the relative or absolute value, which we'll look at next.
Relative positioning
The relative value for the position property allows the elements to appear in the normal flow of the page, reserving space for the element as intended and preventing other elements from flowing around it. However, it also allows you to modify the element's position using offset properties. For example, consider the following HTML and CSS:
Div ( height: 100px; width: 100px; ) .offset ( left: 20px; position: relative; top: 20px; )
Relative positioning demonstration
Here for the second element
For relatively positioned elements, it's important to know that the box's offset properties determine where the element will be moved, given its original position. So a left property of 20 pixels actually pushes the element to the right by 20 pixels. A top property of 20 pixels will then push the element down by 20 pixels.
When we position an element using the offset properties, the element overlaps the element below it instead of pushing it down like the margin or padding properties do.
Absolute positioning
The absolute value for the position property differs from the relative value in that an absolutely positioned element does not appear in the normal flow of the document, and the original space and position of an absolutely positioned element is not reserved.
Also, absolutely positioned elements are moved relative to their nearest relatively positioned parent element. If there is no relative positioned parent, then the absolutely positioned element will be positioned relative to the element
. This is a small piece of information; let's take a look at how it works inside some code:
Section ( position: relative; ) div ( position: absolute; right: 20px; top: 20px; )
Demonstration of absolute positioning
In this example, the element For relatively positioned elements, the offset properties determine in which direction the element will be moved relative to itself. For absolutely positioned elements, the offset properties determine in which direction the element will be moved relative to its nearest relatively positioned parent. As a result of the right and top properties, the element Since the element Learning how to position content in HTML and CSS is a huge step towards mastering these languages. Add to that the box model and we are well on our way to becoming front-end developers. From the author: Greetings. Positioning css elements is a very important topic in website building. In this article, I propose to consider it in more detail, all the ways to move blocks around a web page. If we talk about the positioning of block elements, then it is set using the position property. It has four meanings and each deserves separate consideration. This is the first known species. It is set like this: position: absolute. After that, the block loses its usual properties and completely falls out of the normal flow. What is this stream? Try to put several block-level elements in a row in the markup. How will they become? One after the other, and nothing else. This is the normal behavior of blocks by default. But what happens to a block that has absolute positioning defined? It completely falls out of the normal flow, other blocks simply stop noticing it, as if it never existed, but the element remains on the page. Absolute positioning in css is often used to accurately position decorative elements, icons, and other goodies. Now it can be moved using the left, right, top and bottom properties. By default, movement occurs relative to the edges of the browser window, but if the parent element is set to position: relative, then the offset occurs relative to the parent block. Block( position: absolute; bottom: 0; right: 0; ) Block ( position : absolute ; bottom: 0 right: 0 The element will be moved to the lower right corner. I notice that this is often how they do the top button - they just place it absolutely in the very corner. And here's another example where I'll show the possible markup first: <
div
id
=
"wrapper"
>
<
div
class
=
"block"
>
<
/
div
>
<
/
div
>
And now the css styles for this snippet: #wrapper( position: relative; ) .block( position: absolute; top: 0; right: 10px; ) #wrapper( position : relative ; Block ( position : absolute ; top : 0 ; right : 10px ; In this example, we first recorded the relative positioning of the parent container (relative - more on that later in the article), and then set the absolute position for the same .block element. As a result, the coordinates will be counted not from the browser window itself, but from the edges of the parent element, that is, the wrapper block. This is the next view and it is written like this - position: relative. Coordinates are specified by the same properties as in absolute position. The only significant difference is that the element does not formally fall out of the flow - there is room for it. The operation of this value can be compared with visibility: hidden, when the element is hidden from the page, but the place under it remains untouched. The same happens with relative placement - the block can be moved anywhere, but the place under it remains empty and it will not be occupied by other parts. It is also important to know that the offset does not come from the edges of the web browser window, but from the place where the block originally stood. I.e: Block( position: relative; top: 10px; right: 50px; ) Block ( position : relative ; top : 10px ; right: 50px The block will move 50 pixels to the right and 10 pixels to the left. Surely on the Internet you have seen more than once on sites when, when scrolling, a banner did not disappear, but continued to be in your visibility zone, as if sticking to one place. This is mainly implemented using fixed positioning. To do this, you need to write: The last view is static, which is the normal behavior of block-level elements. It does not need to be written, because it is the default, but you still need to know about the fourth value. Sometimes position: static is written to override a different kind of positioning on certain events on the web page. We have considered the meanings, but this is not enough to close this topic for ourselves. Actually, you need to understand where and what types of positioning you need to apply. With fixed, I already gave you an example - it can be used to create sticky sidebars, headers or footers. Relative positioning can help when you want to move a block slightly relative to its position and still keep it in the flow. It is also set to parent blocks to use absolute movement for child elements. The position property does not solve all problems with the placement of block elements. How would you, for example, create a site grid with it? I don't have good ideas. This is where other features come in handy. With the help of float in css, grids are often made. The property allows you to push the block to the left or right edge of the parent (float: left, float: right), allowing several block elements to become in one line, which occurs very often on any sites. Centering is done like this: the block needs to write a certain width, and then set the margin: 0 auto property. It is the auto value that will align it horizontally exactly in the center. Naturally, for this it must be the only one in its line, otherwise nothing will work. All types of positioning listed in this article can be useful to a web developer. Somewhere the icon needs to be inserted (position: absolute), somewhere, slightly correct the position of the block, leaving a place behind it (position: relative), and where the widget should be fixed (position: fixed). In general, knowledge of this property will definitely not be superfluous. Well, to learn even more from the world of site building, be sure to subscribe to our blog and get new training materials. And I also advise you to look at ours, where a similar topic is also raised. (positioning elements) Still not understanding how absolute positioning works in CSS and losing elements on the screen? Let's explore this magic. Consider a code with four divs nested in each other like a doll. <
body
>
<
div
class
=
"box-1"
>
<
div
class
=
"box-2"
>
<
div
class
=
"box-3"
>
<
div
class
=
"box-4"
>
<
/
div
>
<
/
div
>
<
/
div
>
<
/
div
>
<
/
body
>
Box-1 , box-2 and box-3 are centered for beauty with margin: auto and 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. At the moment, the layout looks like this: To position itself, an element needs to know two things: If you define position: absolute on box-4 , that element will leave the normal document flow. But now it remains in its place, since the offset coordinates are not set. If an element's width is not defined in CSS, it will be equal to the width of its content (plus padding and border). Now let's add top: 0 and left: 0 properties. The element must determine which parent container will be the origin for these coordinates. It becomes the nearest element with a non-static position (most often position: relative). box-4 starts polling its ancestors one by one. Neither box-3 , nor box-2 , nor box-1 are suitable, as they have positioning in CSS by default (unset). If no positioned ancestor is found, the element is positioned relative to the body of the document: If you set position: relative on the box-1 element, it will be the reference point: An absolutely positioned element is positioned relative to its nearest positioned ancestor. Once a reference point has been found, everything above it in the DOM tree ceases to matter. If you set position: relative to box-2 as well, then box-4 will be positioned relative to it, because this ancestor is closer. Similarly for the box-3 container: Property position has the following meanings
Add an empty tag before the div with class="primer" - . Elements on a web page take up a certain amount of space. By analogy with the boats in the game "Battleship". Between the ships there should be empty cells - margin. In order to place one element on top of another, you need to set a negative value for margin. But then the contents of the tags will overlap each other. With the help of the position and properties, they sort of rise to level 2. In a natural order, the bottom tags in the code are shown above the top ones. Thanks to the z-index at level 2, you can determine the visible element yourself. position: static is the default and overrides relative , absolute , and fixed . The values of top, bottom, right, left properties are ignored. In the absence of transform, the z-index is not taken into account either.
The block that we assign position: relative to will be given priority. The content of the bottom element is hidden.
In order to place block B on top of C, but below A, it is not enough to assign position: relative to it, since in the code it is below block A, which means it will overlap it.
You also need to set the z-index for element B to be less than that of block A.
Instead of margin in relative positioning, it is sometimes better to use top, bottom, right, left properties. The starting point for them is the initial position of the element. At the same time, block B continues to be located as if block A is in the same place - it leaves empty space for it. Therefore, you can not conjure with an empty div ().
Full analogy with a property
Built-in margin elements do not move up and down (). Only top, bottom
B A B It would seem that the block with position: absolute should be above position: relative, but this is not the case, the natural order applies here. This means that z-index will allow you to choose a priority element between them.
Block C ignores the initial position of block B, because with position: absolute and position: fixed, the element stops affecting adjacent tags either through its width/height or float: left.
And now, to consolidate the material, click on the buttons at the beginning of the article, think about why such changes occurred.Summary
What are the types
Absolute positioning
Relative positioning of css elements
Fixation
Position:static or regular static position
How to make block positioning in css correct?
Other techniques: centering, floating blocks
Introduction to positioning
When you set position: absolute , it's not the element itself that comes to the fore, but its parent container, because CSS is positioned relative to it. The tricky part is that it's not always the element's immediate parent.
.box-4 without positioning What are we positioning in relation to?
.box-4 with absolute positioning without offset 
.box-4 with absolute positioning. Parent elements without positioning 
.box-4 with absolute positioning. .box-1 with relative positioning 
.box-4 with absolute positioning. .box-2 with relative positioning
static relative absolute fixed
Properties are only applied in conjunction with it (excl. position: static;)
top bottom right left
may be present at the same time
margin transform float (excl. position: absolute; and position: fixed;) Introduction
Static positioning - position: static;
Relative positioning - position: relative;
For inline elements
Absolute and fixed positioning
Final table
distinctive properties position: static; position: relative;
transform: translate();position: absolute; position: fixed;
overlay elements should not be placed on top of each other elements take precedence over visibility over static. Other values are equivalent. The one who is below in the code will be visible, or has a large z-index value
reference point top, right, bottom and left ignored the initial position of the element edge of parent element edge of the browser window
elements around take into account the current position of the element take into account the initial position of the element ignore element position
width: 100% is the width element (for inline)/parent element (for block) parent element with position not set to static browser windows
on page scroll element moves "sticks" to the specified location in the browser window
