Understanding the position attribute in CSS – When designing layouts for websites, transitioning from a design file in HTML format requires the use of the position attribute in CSS. For example, creating a feature bar on a menu, header, etc. It can be understood as the attribute that determines the positioning method for elements.
Có 5 giá trị chính của thuộc tính position mà chúng ta cần biết:
Static: This is considered the default display value for Position in CSS, where elements are positioned in the order of the text.
Relative: Absolute positioning for elements, without affecting the initial position or other elements.
Absolute: This value allows for absolute positioning of elements relative to the surrounding element or at least to the browser window. Fixed: Relative positioning of elements relative to the browser window.
Fixed: This value positions and fixes an element in place, for example, when you scroll the browser, the element will not change.
Inherit: Determines the inheritance of attributes from the parent element (the outer element).
First, let’s talk about the relative, absolute, and other cool attributes of the position.
The Relative Position Attribute
The position: relative attribute in CSS allows for absolute positioning of elements. For example:
selector{position: relative;}
If you use this attribute, you must also use alignment attributes for the coordinates of the element (note: the values of these attributes are measurement units such as px). Top: is the top position, Bottom: is the bottom position, Left: is the left position, Right: is the right position. Let’s look at the following example code:
<html> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <title>Thuộc tính position trong CSS</title> </head> <style type=”text/css” media=”screen”> div { padding: 40px; margin: 20px; width: 320px; border: 2px solid red; } </style> <body> <div>TopDev tuyen dung IT hang dau.</div> <div class=”relative”>TopDev tuyen dung IT hang dau.</div> <div>TopDev tuyen dung IT hang dau.</div> </body> </html>0
You can test and see that the elements are displayed in the correct order, now you can add CSS code to the relative class as follows:
.relative {position: relative; /260px left/ left: 260px; /290px top/ top: 290px; background-color: #e1ab22; }
Note that when you offset an element with position: relative, the space it occupies does not move, its current position will not affect the layout around that position… Imagine it like this, position: relative is like a character with the ability to move freely, but always associated with the original location.
The Absolute Position Attribute
As mentioned above, the position: absolute attribute in CSS is used to provide absolute positioning for elements relative to the surrounding element or at least the browser window. Specifically, the absolute attribute determines the coordinates of the element relative to a relative parent element (if any). If there is no parent element, then it will follow the body of the entire webpage. The usage is similar to relative positioning.
Here is an example similar to the one above, but using the absolute attribute. You will see that when we move the elements using absolute positioning, the next elements will be placed in their default position. You can try it yourself.
.absolute { position: absolute; /260px left/ left: 260px; /290px top/ top: 290px; background-color: #e1ab22; }
The Static Position Attribute
The position: static attribute is considered the default value of the position attribute. These are values that whether you declare them or not, elements will be arranged in a normal way on the webpage. You can see the example below:
<body> <div class=”box-red”></div> <div class=”box-green”></div> </body>
You can try adding position static as follows:
// This is when you don’t declare position .box-orange { background: Green; height: 250px; width: 250px; } .box-blue { background: grey; height: 250px; width: 250px; position: static; }
The Fixed Position Attribute
Xem thêm : Đấu thầu hạn chế là gì? Các trường hợp áp dụng đấu thầu hạn chế?
This attribute is commonly used by developers to position an element relative to the browser window. You can see this example, when you visit a website and try to scroll the browser, you will notice that the menu or button stays in one place without changing, this is the position fixed. This value does not depend on the parent element, it only works when the browser is scrolled. You can refer to the following example:
.header { margin-top: 0px; text-align: center; position: fixed; top: 0px; width: 100%; background: #e1ab22; }
The Sticky Position Attribute
This is a attribute that is quite similar to fixed, you can see it as a “best of both worlds” combination of relative and fixed. Because of this combination, it is not widely supported in the web development community. It can’t be used in Internet Explorer browsers and some early versions of Edge, so it can cause errors. It is not recommended for developers to use.
10 Front-End Courses You Can’t Miss
TopDev would like to introduce you to the top 10 free courses, tutorials, training, classes, and certifications for front-end development.
Web Designing Certification by University of Michigan (Coursera)
This course conducted by the University of Michigan is most suitable for anyone who wants to learn how to design professional and sophisticated web pages. The instructors will teach you how to build a web page using JavaScript, CSS3, and HTML5.
With this course, you can also take on the role of a web developer. You will be taught about new technology techniques, developing websites that can work on desktop computers, tablets, and mobile phones.
In addition, the study time for this course is about 3 months, with flexible scheduling, the study schedule depends on the learner’s availability.
The Front-End Web Developer Bootcamp (Udemy)
This course promises to help you learn all the necessary technologies and platforms for web development. The beginner classes will introduce you to the basic knowledge of various types of languages such as HTML, CSS, JS, Node, MongoDB, etc.
You will learn how to create web applications, games, and access more complex knowledge. Udemy balances between theory and practice, making it easier for beginners to follow.
At the end of the program, you will have a range of experiences to put on your resume and a series of great projects to showcase. The study time for this course is about 46 hours.
The Complete Web Developer: Zero to Mastery (Udemy)
Andrei, the creator of this course, has worked as a senior developer in Silicon Valley before deciding to share his rich knowledge with learners. In this course, he will teach you how to write code using HTML5, CSS, JavaScript, React, Node.js, Machine Learning, and more.
Front-End Web Development Certification (Coursera)
If you want to apply your Bootstrap knowledge and work in front-end application development, then look no further, this course will teach you how to use the React and Javascript ES6 libraries to build applications.
You will become familiar with different aspects of React, Flux, Redux, and learn about the position attribute in CSS. After achieving the core goal of the program, you will end the classes with lectures on React animation support and testing. As this is an intermediate-level class, Bootstrap 4, JavaScript, and related web technologies knowledge are required.
The study time for this course is about 4 weeks, 6-8 hours per week.
Front-End Web Development Courses (Udemy)
With the progress of the web, the development of web applications has also gone through a long journey and is evolving every day. Therefore, this course is designed specifically to help you build a career in web application development.
The highlight of this course is its suitability for people at different levels. The lessons revolve around different languages and various types of technologies, so learners can freely choose the lectures that suit their needs.
At the end of the lectures, you will have the opportunity to take more advanced courses once you have mastered all the knowledge and have good practical results. The study time for this course is self-adjusted according to the learner’s abilities.
Xem thêm : Simplicity là gì? Tính ứng dụng của Simplicity trong thiết kế
Front-End Web Developer Course (LinkedIn Learning – Lynda)
This course is designed to help you gain the essential skills needed to develop user experiences and interactions on the web. Learn all the necessary technology skills to design and build user-focused web pages.
Furthermore, the lectures will teach you how to bring ideas and concepts from life into the canvas of the browser by combining the necessary graphic and coding skills. With more than 15 learning modules and advanced content.
The study time for this course is self-adjusted according to the learner’s abilities.
Front-End Certification Courses (Coursera)
This course will list professional programs, specialized courses covering different aspects of front-end development and various technologies needed. There are many frameworks and languages taught in this course, such as React, Bootstrap, Angular JS, and you will also need to understand the position attribute in CSS…
These courses have different teaching durations, and you can choose the one that suits your requirements. The study time for this course is self-adjusted according to the learner’s abilities.
Front-End Web Developer Certification by W3C (edX)
The professional certification exam for Font-end created by W3C includes all the necessary techniques to build responsive user experiences and interactions on the web.
The main focus is the three foundational web languages: CSS, HTML5, and JavaScript. With the help of famous experts, you will be guided step by step on how to create and deploy innovative concepts and work on real examples to better understand the topics.
The study time for this course is 4-6 weeks per course, 6-10 hours per week, and you need to complete 5 courses to obtain this certification.
Microsoft Professional Certification in Front-End Web Development (edX)
This professional course created by Microsoft is designed to help you build a strong knowledge foundation by focusing on fundamental principles and answering your questions. The lectures will introduce you to the most commonly used tools and features with various demonstrations.
There will be a project at the end of the program to help you consolidate and organize the knowledge you have learned. You will use your knowledge to build an upgraded project for your portfolio.
After completing this 11-course series, you will be skilled and ready to apply for front-end web developer positions in your chosen company or work freelance.
The study time for this course includes 11 courses, 6-10 hours/week/course.
Front-End Web Developer Course for Beginners (Codecademy)
This learning path from Codecademy is designed for beginners with no experience in becoming a junior-level web developer. The lessons start with user interface languages such as HTML, CSS, and JavaScript.
Once you have mastered the user interface technologies, you will learn more advanced skills. Ultimately, you will become proficient in building and designing websites.
The study time for this course is about 30 weeks.
Conclusion
It can be said that the position attribute in CSS is one of the most important knowledge that needs to be mastered. These attributes are widely used in website development today, especially when you are cutting layouts or creating components like menus. You should try some position exercises to become more proficient in using this feature.
Related articles:
- Understanding the Writing Mode attribute in CSS
- Fixing scroll issues with fixed headers using CSS
Find more CSS jobs at TopDev
Nguồn: https://stamboom-boden.com
Danh mục: Là Gì
