Research on the value of position attribute in CSS (summary)
|
The CSS position attribute specifies the element's positioning type, and then uses top, bottom, left, and right to position it specifically. The position attribute must be used before specific positioning, otherwise all specific positioning attributes will not take effect. There are five possible values for position: static, relative, absolute, fixed, or sticky. Below, the blogger will explain the comparison of codes and running results one by one First, the position attribute is not set. You can see that the top attribute of the two elements is not effective, while the color attribute is effective. The current position is the position in the default document flow. This is used as a prototype to compare the changes in element position when the position is changed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./j.css">
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</div>
</body>
</html>
.box {
display: inline-block;
background: red;
color: white;
}
#two {
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
position：static Add position: static; to the #two class as follows (only the position value is modified in each subsequent place)
#two {
position:static;
top: 260px;
bottom: 126px;
left: 20px;
background: blue;
}
The default value for an HTML element is that it has no positioning and appears in the normal flow. Statically positioned elements are not affected by top, bottom, left, or right. Since this value will invalidate the positioning attribute, what is the meaning of its existence? During the process of modifying the web page style, you can temporarily block the position information of certain elements, or retain the position information of certain parts during modification to facilitate recovery. position：relative Relative positioning is positioning relative to the original normal document flow, but the original page layout is not changed during positioning. It is equivalent to just moving the positioned element, and the moved comparison standard position is the position in the normal document flow, and the original position will be left blank.
position: absolute With absolute positioning, the element is removed from the normal document flow and does not create space for elements in the page layout. It is positioned relative to the most recently positioned parent element. In this example, the positioning is based on the body element.
position: fixed Fixed positioning is similar to absolute positioning in that it will be deleted from the normal document flow and will not create space for elements in the page layout. The difference is that it is fixed to the viewport and is positioned based on the viewport. I believe everyone has had this experience when browsing many web pages. There will be advertisements on the top or bottom of the web page that will not move with the scrolling of the web page. They are fixed on the web page, and if the z-index is not set to modify the stacking order, they will cover the content of the web page.
position: sticky The element does not leave the document flow and still retains its original position in the document flow. When the element is scrolled beyond the specified offset value in the container, the element is fixed at the specified position in the container. That is, if you set top: 20px, then when the sticky element reaches a position 50px from the top of the relatively positioned element, it is fixed and no longer moves upward. The fixed relative offset of an element is relative to the parent element with the scroll box closest to it. If the parent element cannot be scrolled, the offset of the element is calculated relative to the viewport.
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Docker builds kubectl image implementation steps
>>: Beginners learn some HTML tags (3)
Recommend
Docker deployment springboot project example analysis
This article mainly introduces the example analys...
The problem of Vue+tsx using slot is not replaced
Table of contents Preface Find the problem solve ...
A brief analysis of understanding Vue components from an object-oriented perspective
When the same function and HTML code are used mul...
Problems and solutions when installing and using VMware
The virtual machine is in use or cannot be connec...
SQL statements in Mysql do not use indexes
MySQL query not using index aggregation As we all...
Introduction to container of() function in Linux kernel programming
Preface In Linux kernel programming, you will oft...
Tutorial on logging into MySQL after installing Mysql 5.7.17
The installation of mysql-5.7.17 is introduced be...
Solution to the problem of Access denied for user'root'@'localhost' (using password: YES) in MySQL 8.0 login under win10
I started learning MySQL recently. The installati...
Analysis of two usages of the a tag in HTML post request
Two examples of the use of the a tag in HTML post...
An article to help you learn CSS3 picture borders
Using the CSS3 border-image property, you can set...
Solution to the error when importing MySQL big data in Navicat
The data that Navicat has exported cannot be impo...
Parsing MySQL binlog
Table of contents 1. Introduction to binlog 2. Bi...
In-depth understanding of Worker threads in Node.js
Table of contents Overview The history of CPU-bou...
Analysis of log files in the tomcat logs directory (summary)
Each time tomcat is started, the following log fi...
MySQL implements increasing or decreasing the specified time interval for all times in the current data table (recommended)
The DATE_ADD() function adds a specified time int...