The variety of websites is increasing day by day and different users have the right to choose one of them, one of the factors that affect the choice of users is the layout of a site due to the fact that when the site layout is attractive , it causes the users to choose it among others, there are various elements which are effective in creating a page, and in addition to the existence, their arrangement is of a great importance, and you must choose where each element should be placed very carefully, in the following, we are going to pay more attention to this issue.
What is CSS?
CSS stands for Cascading style sheets which is used for the appearance of the site, in simple terms, it describes how HTML elements should be displayed on different sites.
How to position in CSS?
Determining the correct position for different elements is so essential, and it is an issue that may not be taken seriously, so that when they want to fix the existing bugs, they may try to change the position of the elements without proper awareness of its consequences, which may eventually be right or wrong, and they may be able to find the right position by repeating this process, but it would be so boring, you should also pay attention to the fact that for each element, depending on the purpose of placing them in the content, different position may be suitable, in the following, we are going to examine the different methods that exist in order to determine the position of elements.
Position properties:
Position may have different properties, such as static, relative, absolute, fixed, and inherit, each of which is used for different purposes, so that you need to specify your purpose first and then determine the position.
It allows you to place elements in a specific location on the page, or to set one element in front of another, or vice versa, you can determine the position of different elements according to the method you use with the help of top, bottom, left and right properties.
In the following section, we are going to explain the different positioning methods.
- Static:
If you do not set the position, the elements will be static by default, in fact, through this way, all the elements will be in accordance with the normal flow of the page layout, it should be also noted that the elements that you determine their position in this way cannot be affected by the top, bottom, left, right properties, now consider the following examples.
# box_1 {
Position: static;
Width: 400px;
Height: 400px;
Background: # ee3e64;
}
# box_2 {
Position: static;
Width: 400px;
Height: 400px;
Background: # 44accf;
}
# box_3 {
Position: static;
Width: 400px;
Height: 400px;
Background: # b7d84b;
}
This method is used to position elements with simple designs, and as mentioned earlier, it is not possible to affect and move them with the help of top, bottom, left, right properties, so if you use this method, you will lose the chance to move them, this method is also used in the following example.
<! DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
p.pos_fixed {
position: fixed;
top: 40px;
right: 8px;
}
</style>
</head>
<body>
<p class = "pos_fixed"> An element with position: fixed </p>
</body>
</html>
- Relative:
The difference between this method and the previous one in determining the position is that it is possible to move the elements with the help of top, bottom, left, right properties, but it generally puts the elements in normal places, here are some examples in the following:
# box_1 {
Position: relative;
Width: 200px;
Height: 200px;
Background: # ee3e64;
}
# box_2 {
Position: relative;
Width: 200px;
Height: 200px;
Background: # 44accf;
}
# box_3 {
Position: relative;
Width: 200px;
Height: 200px;
Background: # b7d84b;
}
Here is another example of how to position elements using this method:
<! DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
h2.pos_top {
position: relative;
top: 50px;
}
</style>
</head>
<body>
<h2 class = "pos_top"> This element has position: relative; </h2>
</body>
</html>
- Absolute:
In this method, in order to determine the position of different elements, they are positioned according to the parent element, and in the case that they cannot find it, then the elements will change position according to the HTML code is displayed on top and in front of another element.
- Right:
This property determines the edge of right margin for the positioned box.
- Top:
It adjusts the edge of the top margin for the positioned box.
Last word:
In this article, we have explained the different methods of positioning the elements for you and tried to help you understand them better by giving various examples in this regard, so that you can use it to determine a suitable framework for your content, in general, there were 5 methods to determine the position of the elements, each of which should be used according to the purpose of using the element, so that try to choose the best one according to the mentioned points.
Canvas Rectangle, Shadow, Path and Text training in HTML
Best Backlink Checker And Linking Analysis Tools
The top 8 types of networks security attacks
Is it good to invest in apps, for having a passive income?
Getting started with Xamarin.Forms
Xamarin app programming Vs. Java app programming for Android
The hidden cost of the app before and after launch
Title, Meta description, Headings and Content for SEO
Factors to consider for a professional web design
SQLite.NET as a Local Database in Xamarin.how it works?
How to Make your website secure?
The best methods to build high-quality backlinks for website